WEB安全之浏览器安全机制

WEB 安全是互联网时代重点关注的问题，也是产品设计中必须考虑的一部分。作为一个开发人员，有义务和责任打造安全可靠的 WEB 应用供用户使用，保证用户数据的机密性，完整性以及服务的可用性。

浏览器的同源策略

浏览器以协议头、域名、端口的组合标识一个页面的源。两个页面访问的协议头、域名及端口都相同，称两个页面具有相同的源。
下表列出与http://store.company.com/dir/page.html进行同源检测的结果：

页面地址	检测结果	原因
http://store.company.com/dir2...	成功
http://store.company.com/dir/...	成功
https://store.company.com/sec...	失败	协议差异（https/http）
http://store.company.com:81/dir/etc.html	失败	端口差异（81/80）
http://news.company.com/dir/o...	失败	子域名差异（news/store）

同源策略下的资源访问

跨源页面之间使用 XMLHttpRequest 和 Fetch API 请求数据，通过<img>,<link>，<script>等 HTML 标签引用资源，这里统称为资源访问，都将受到浏览器的同源策略的控制。跨源资源访问时，不同的交互方式默认有不同的浏览器限制：

• 跨域写，例如表单数据提交至其他源，浏览器默认允许。
• 跨域嵌入，例如<img src="..." />,<iframe src="..."/>，<script src="..." />等标签引入其他源资源，浏览器默认是允许的。
• 跨域读，例如通过 ajax 请求获取其他源返回数据，浏览器默认是禁止的。

同源策略下的存储访问

浏览器最初使用 cookie 作为本地存储，H5新增 LocalStorage 和 IndexedDB 的存储方式。
浏览器通过检测 cookie 的 domain 属性控制源，例如有 cookie: key=hello 的 domain 设为.jaylin.wang，local.jaylin.wang,www.jaylin.wang,jaylin.wang均可访问，有 cookie: key2=world 的 domain 设置为local.jaylin.wang, 则只有local.jaylin.wang可访问。cookie 的 httpOnly 属性可控制cookie只能在服务端读取。

LocalStorage 和 IndexedDB 会根据不同源相互独立，数据的写入和读取都是针对当前源的存储，目前浏览器没有提供跨源读写的支持。

可改变的同源策略

浏览器默认的同源策略机制下，也为开发者提供了改变的机制，列出常用的几种方式：

• domain setting

在一个页面中，通过设置 document.domain 的值，可以将子域名的源设置为父级域名。

• CSP（Content Security Policy）

浏览器支持通过Content-Security-Policy响应头限制内容来源，确保加载内容的可信度。这个机制可以减少 XSS 攻击，

• CORS（Cross-Origin Resource Sharing）

浏览器支持 CORS 配置可信的跨域读资源，以适应WEB应用扩展的需求。

恶意站点检测机制

用户在使用浏览器浏览网页的过程中，不乏有恶意网站给用户带来潜在的安全问题。常见的恶意网站有以下几类：

• 欺骗性网站
  欺骗性网站又被称为钓鱼网站，伪装成合法网站，诱导用户操作，从而窃取用户的隐私信息。
• 攻击性网站
  网站中包含恶意脚本，能够控制访问用户浏览器，窃取用户信息，引导用户进行高危操作。
• 恶意软件
  软件携带病毒，可能导致计算机被攻击的危险软件。

浏览器通常会维护一份被举报和恶意网站列表，检测用户将要访问的目标网站存在于站点列表中，则提示警告信息以阻止用户的继续访问。