异域||跨域（二）

Love The Way You Lie 2021-11-09 05:24 249阅读 0赞

#                                            跨源网络访问 #

同源策略控制了不同源之间的交互，例如在使用[`XMLHttpRequest`][XMLHttpRequest] 或受到同源策略的约束。这些交互通常分为三类：

*  通常允许*跨域写操作（Cross-origin writes）。*例如链接（links），重定向以及表单提交。特定少数的HTTP请求需要添加 [preflight][]。
 *  通常允许*跨域资源嵌入（Cross-origin embedding）。*之后下面会举例说明。
 *  通常不允许*跨域读操作（Cross-origin reads）。*但常可以通过内嵌资源来巧妙的进行读取访问。例如可以读取嵌入图片的高度和宽度，调用内嵌脚本的方法

以下是可能嵌入跨源的资源的一些示例：

`<script src="..."></script>` 标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。

`<link rel="stylesheet" href="...">` 标签嵌入CSS。由于CSS的语法规则松散，CSS的跨域需要一个设置正确的`Content-Type` 消息头。

<img>嵌入图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,...

<video>和<audio>嵌入多媒体资源。

`@font-face` 引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。

frame和irame 载入的任何资源。站点可以使用[X-Frame-Options][]消息头来阻止这种形式的跨域交互。

**                                                                      使用CORS允许跨源访问**

# **                                        阻止跨域访问的操作** #

*  阻止跨域写操作，只要检测请求中的一个不可测的标记(CSRF token)即可，这个标记被称为[Cross-Site Request Forgery (CSRF)][Cross-Site Request Forgery _CSRF] 标记。必须使用这个标记来阻止页面的跨站读操作。
 *  阻止资源的跨站读取，需要保证该资源是不可嵌入的。阻止嵌入行为是必须的，因为嵌入资源通常向其暴露信息。
 *  阻止跨站嵌入，需要确保你的资源不能是以上列出的可嵌入资源格式。多数情况下浏览器都不会遵守 `Content-Type` 消息头。例如，如果您在HTML文档中指定 `<script>` 标记，则浏览器将尝试将HTML解析为JavaScript。 当您的资源不是您网站的入口点时，您还可以使用CSRF令牌来防止嵌入。

[XMLHttpRequest]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
[preflight]: https://developer.mozilla.org/zh-CN/docs/HTTP/Access_control_CORS#Preflighted_requests
[X-Frame-Options]: https://developer.mozilla.org/zh-CN/docs/HTTP/X-Frame-Options
[Cross-Site Request Forgery _CSRF]: https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29