script中的src

<script src="http://www.somewhere.com/afile.js"></script>

浏览器在解析这个资源时,会向 src 属性指定的路径发送一个 GET 请求,以取得相应资源,假定

是一个 JavaScript 文件。这个初始的请求不受浏览器同源策略限制,但返回并被执行的 JavaScript 则受限制。

当然,这个请求仍然受父页面 HTTP/HTTPS 协议的限制。

这段话主要涉及到同源策略(Same-Origin Policy)和跨源资源共享(CORS)在浏览器中的应用。以下是对这段话的逐步解释:

同源策略

同源策略是一种安全机制,旨在防止一个网站的脚本与另一个网站的内容进行交互

同源(Same-Origin)是指两个 URL 具有相同的协议、域名和端口。只有在以下这三个条件都相同的情况下,浏览器才会认为这两个 URL 是同源的。这是为了确保安全性,防止恶意网站通过脚本访问另一个网站的内容。

1.协议(如 HTTP 或 HTTPS)

2.域名(如 example.com

3.端口(如 :80 或 :443)


请求不受同源策略限制

这意味着某些请求(例如,向第三方 API 发送请求)可以成功发送,即使它们不符合同源策略。这通常适用于以下情况:

  • JSONP: 通过 <script> 标签请求数据,通常不受同源策略限制。

  • 某些类型的请求: 比如使用 iframe 等方式加载外部内容。

返回的 JavaScript 受同源策略限制

一旦请求的响应是 JavaScript 代码并被执行,浏览器会检查该 JavaScript 是否符合同源策略。如果不符合,则会限制该脚本的执行,确保防止潜在的安全风险。

浏览器如何检查 JavaScript 是否符合同源策略主要依赖于以下几个方面:

  1. 请求的来源

当网页发送请求(如通过 <script> 标签、AJAX 或 Fetch API)时,浏览器会记录该请求的来源(即发起请求的页面的协议、域名和端口)。

  1. 响应的来源

当接收到响应(例如,一个 JavaScript 文件)时,浏览器会检查响应中包含的内容是否来自同源。如果响应是一个脚本,浏览器会比较该脚本的来源与请求页面的来源。

  1. 执行环境
  • 脚本标签: 当使用 <script> 标签加载外部 JavaScript 文件时,浏览器会在加载该文件前检查其来源。如果文件的 URL 不符合同源策略,浏览器会阻止该脚本的执行。

  • CORS

  • : 对于通过 XMLHttpRequest 或 Fetch API 进行的请求,允许跨源请求的方式是通过设置 CORS(跨源资源共享)头来实现的。服务器需要在响应中包含特定的 CORS 头(如 Access-Control-Allow-Origin)来指示哪些源可以访问其资源。

  1. 安全策略
  • Content Security Policy (CSP): CSP 是一种额外的安全层,可以帮助防止跨站脚本(XSS)攻击。如果网站设置了 CSP,浏览器会根据策略限制哪些源的脚本可以执行。
  1. 错误处理

如果脚本的来源不符合同源策略,浏览器通常会在控制台提供错误信息,指示脚本无法被执行。例如,可能会出现类似"跨源访问被阻止"的错误。

总结

浏览器通过记录请求和响应的来源、比较它们的协议、域名和端口来检查 JavaScript 是否符合同源策略。如果不符,浏览器将限制该脚本的执行,从而保护用户的安全。

HTTP/HTTPS 协议的限制

即使请求本身不受同源策略的限制,仍然需要遵循原页面的 HTTP 或 HTTPS 协议。例如:

  • 如果父页面使用 HTTPS,尝试通过 HTTP 加载资源可能会被浏览器阻止。为了安全,混合内容(HTTP 和 HTTPS 的结合)通常是被禁用的。
相关推荐
小曲曲29 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。7 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js