赛派号

哪个品牌的牙膏最好用又便宜 JS中的script标签

script中的src

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

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

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

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

同源策略

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

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

1.协议(如 HTTP 或 HTTPS)

2.域名(如 example.com)

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

--------------------------------------------------------------------------------

请求不受同源策略限制

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

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

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

返回的 JaScript 受同源策略限制

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

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

1. 请求的来源

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

2. 响应的来源

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

3. 执行环境

- 脚本标签: 当使用  标签加载外部 JaScript 文件时,浏览器会在加载该文件前检查其来源。如果文件的 URL 不符合同源策略,浏览器会阻止该脚本的执行。

- CORS

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

4. 安全策略

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

5. 错误处理

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

小结:

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

HTTP/HTTPS 协议的限制

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

- 如果父页面使用 HTTPS,尝试通过 HTTP 加载资源可能会被浏览器阻止。为了安全,混合内容(HTTP 和 HTTPS 的结合)通常是被禁用的。

推迟执行脚本(defer): 延迟执行: 当在  标签中使用 defer 属性时,浏览器会在文档解析完成后再执行该脚本。这意味着脚本的执行不会阻塞 HTML 的解析。

注意:

1.defer 属性只对外部脚本文件才有效。

2.对于 XHTML 文档,指定 defer 属性时应该写成 defer="defer"。

3.顺序执行: 如果在页面中有多个带有 defer 属性的  标签,浏览器会按照它们在文档中出现的顺序依次执行这些脚本。

这个属性表示脚本在执行的时候不会改变页面的结构。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在script标签上设置 defer 属性相当于告诉浏览器立即下载,但延迟执行。

所以,假设有两个推迟脚本,第一个推迟的脚本会在第二个推迟的脚本之前执行,而且两者都会在 DOMContentLoaded 事件之前执行

与async比较: 1.defer 属性 加载: 脚本会异步加载,但执行会延迟到文档解析完成后。顺序: 如果有多个带有 defer 属性的脚本,它们会按照在文档中出现的顺序执行。适用性: 仅适用于外部脚本(即通过 src 引入的脚本)。2. async 属性 加载: 脚本会异步加载,并且会在加载完成后立即执行。顺序: 如果有多个带有 async 属性的脚本,它们的执行顺序是不确定的,取决于哪个脚本先加载完成。适用性: 也仅适用于外部脚本。模块化:

什么是模块化?

模块化是将代码分割成小的、独立的、可重用的部分(模块),每个模块可以单独开发、测试和维护。JaScript 的模块化使得代码组织更加清晰,提高了可维护性。

使用 

当使用  标签并指定 type="module" 时,浏览器会将该脚本视为模块。这意味着:

模块作用域: 模块中的变量和函数不会泄漏到全局作用域,只能在模块内部访问。导入和导出: 可以使用 export 和 import 语句在模块间共享代码。

示例:

module.js:

// 导出变量和函数 export const greeting = 'Hello, World!'; export function greet() { console.log(greeting); } Module Example import { greeting, greet } from './module.js'; console.log(greeting); // 输出:Hello, World! greet(); // 输出:Hello, World! 模块化示例 小结: 使用  使代码模块化,支持导入和导出。模块内部的变量和函数不会污染全局作用域。脚本的作用域:

全局作用域:

在普通的  标签中定义的变量和函数会被添加到全局作用域,意味着它们可以在任何地方被访问。

块级作用域:

使用 let 和 const 定义的变量具有块级作用域。它们只在定义它们的代码块(如函数、if 语句或循环)内可用。

在  标签中定义的变量和函数,会在全局作用域中可用。使用 let 和 const 可以创建块级作用域。小结: var 定义的变量是全局作用域的。let 和 const 定义的变量是块级作用域的,只在其定义的块内有效。动态创建脚本: 可以通过 JaScript 动态创建和插入  标签: const script = document.createElement('script'); script.src = 'script.js'; document.head.appendChild(script);

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lsinopec@gmail.com举报,一经查实,本站将立刻删除。

上一篇 没有了

下一篇没有了