HTML 跨域属性

HTML的元素用于在HTML文档中引用外部资源，如样式表、图像、脚本等。有时，这些资源可能存储在不同的域名下，因此需要使用跨域属性来加载它们。

跨域属性

常见的跨域属性有两种：

1. crossorigin
2. referrerpolicy

crossorigin

crossorigin属性允许跨域访问资源。通常，浏览器不允许通过JavaScript访问不同的域名资源，但是通过设置crossorigin属性，可以允许跨域访问。

语法：

<link crossorigin="anonymous" href="https://example.com/styles.css" rel="stylesheet">

其中，crossorigin的值为anonymous或者use-credentials。它们的区别在于是否允许客户端发送凭证（如cookie或HTTP认证）。

如果使用use-credentials，服务器需要设置Access-Control-Allow-Credentials响应头，否则将会导致错误。

referrerpolicy

referrerpolicy属性控制了资源获取请求时的引用信息传递。当请求跨域时，可以使用该属性告诉浏览器是否应该将引用信息发送到服务器。

语法：

<link referrerpolicy="no-referrer" href="https://example.com/styles.css" rel="stylesheet">

该属性的值包括以下几种：

• no-referrer：不发送引用信息
• no-referrer-when-downgrade：默认行为，只有协议从HTTPS降级到HTTP时，引用信息不发送
• origin：发送当前文档的域名信息
• origin-when-cross-origin：跨域时只发送当前文档的域名信息
• unsafe-url：始终发送完整的URL

示例

<link crossorigin="anonymous" referrerpolicy="no-referrer" href="https://example.com/styles.css" rel="stylesheet">

上面的代码表示引用了example.com域名下的样式表，并设置了跨域属性和引用策略。

总结

通过使用crossorigin和referrerpolicy属性，可以实现跨域访问外部资源，并控制请求时传递的引用信息，从而提高网站的安全性和性能。