首页
学习
活动
专区
圈层
工具
发布

同源策略与跨域资源共享

SOP影响广泛,包括CSS如何应用(不能读取跨域CSS规则)、图片(Canvas污染)和Frame/Iframe的交互。SOP阻止所有跨域交互?错误。...内容分发网络(CDN):从CDN加载JavaScript库(jQuery,React)、CSS框架、图片等静态资源。Web字体:网站从字体服务提供商的域加载自定义字体。...六、CORS配置错误与安全风险(MisconfigurationsandSecurityRisks)错误的CORS配置是常见的Web安全漏洞来源,可能导致敏感信息泄露或允许未授权的操作。...由于源匹配了错误的正则,服务器错误地信任了该源,返回了允许访问的ACAO头,导致数据泄露或未授权操作。防御:编写正则表达式时必须极其小心,进行充分测试。...XSS:如果回调函数名可由用户控制且未充分过滤,可能注入恶意脚本。XSSI(Cross-SiteScriptInclusion):可能泄露用户特定的敏感信息,如果响应内容基于用户的Cookie变化。

1.1K00
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    了解前端跨域知识

    Access-Allow-Max-Age(本次预检请求的有效时长): 如果设置了且未超过有效时长,则不用重复发送预检请求。...非简单跨域请求发送的预检请求确认服务端不允许该请求,则会忽略后续请求,不发送真实请求。 5. 如何解决跨域限制 JSONP浏览器允许嵌入跨域资源的请求: CSS 字体跨域 JSOP 就是根据 script 标签可以嵌入跨域脚本这一特性,在 script 标签里填入跨域资源 url,比较关键的一点是 url 末尾会带一个callback(回调函数...最终被请求的服务器是不知道真实请求的是哪台客户端的 基于 iframe 跨域(这里仅介绍 window.name + iframe 处理跨域的原理,还有其他方式没有去了解就不做介绍了,应该也是大同小异的...利用这一特性加上 iframe 可以嵌入跨域资源,我们可以如下实现跨域:在源A页面,手动创建一个 iframe 标签,并嵌入源B页面,这时我们虽然可以嵌入显示源B页面内容,但受同源策略限制,我们是拿不到源

    84120

    三款快速删除未使用CSS代码的工具

    这可能产生一些不良的影响,如: 性能问题: 未使用的CSS会增加页面的加载时间,因为浏览器需要下载并解析这些不必要的样式表。...推荐三款工具,可根据项目情况进行选型: PurgeCSS PurgeCSS 通过分析你的内容和 CSS 文件,首先它将 CSS 文件中使用的选择器与内容文件中的选择器进行匹配,然后它会从 CSS 中删除未使用的选择器...例如,要从 Pug 模板文件中删除未使用的 CSS,你需要将 Pug 转换为 HTML 并在 jsdom 中模拟页面。...目前,在删除未使用的 CSS 方面,UnCSS 在某些情况下可能是最准确的工具。...提取器是一个函数,它的作用是根据文件内容提取文件中使用所有的 CSS 选择器。它可以完美地删除未使用的 CSS。

    4.3K30

    阿里前端二面常见面试题汇总_2023-03-01

    浏览器将CORS分为简单请求和非简单请求: 简单请求不会触发CORS预检请求。...服务器在收到浏览器的预检请求之后,会根据头信息的三个字段来进行判断,如果返回的头信息在中有Access-Control-Allow-Origin这个字段就是允许跨域请求,如果没有,就是不同意这个预检请求...它表示预检请求的返回结果可以被缓存多久,单位是秒。该字段只对完全一样的URL的缓存设置生效,所以设置了缓存时间,在这个时间范围内,再次发送请求就不需要进行预检请求了。...(5)异步http请求线程 XMLHttpRequest连接后通过浏览器新开一个线程请求; 检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将回调函数放入事件队列中,等待JS引擎空闲后执行...因为只有完成了编译过程,才可以对 css 代码进行插入;若提前插入了未编译的代码,那么 webpack 是无法理解这坨东西的,它会无情报错。 前端储存的⽅式有哪些?

    2.1K00

    高级前端面试题汇总_2023-02-27

    prototype’ of undefined 解决办法通过浏览器报错提示代码定位问题,解决问题 Vue项目中遇到视图不更新,方法不执行,埋点不触发等问题 一般解决方案查看浏览器报错,查看代码运行到那个阶段未之行结束...服务器在收到浏览器的预检请求之后,会根据头信息的三个字段来进行判断,如果返回的头信息在中有Access-Control-Allow-Origin这个字段就是允许跨域请求,如果没有,就是不同意这个预检请求...它表示预检请求的返回结果可以被缓存多久,单位是秒。该字段只对完全一样的URL的缓存设置生效,所以设置了缓存时间,在这个时间范围内,再次发送请求就不需要进行预检请求了。...,还要改动CSS。...CSS 样式来源主要有 3 种,分别是通过 link 引用的外部 CSS 文件、style标签内的 CSS、元素的 style 属性内嵌的 CSS。

    2.3K20

    多应用聚合实践

    iframe 在企业中,各个研发部门往往各自开发自己的应用。当需要把这些应用聚合在一起时。以往的解决方案是在主应用中嵌入 iframe,使用 iframe 加载和切换子应用页面。...当父应用页面被刷新时,iframe 会丢失跳转的路径状态(你可以将iframe中的页面状态保存在父应用的URL上,然后在刷新页面的时候从URL上读取状态再来修改iframe中的页面地址。...iframe 中的 DOM 是独立的。好处是 iframe 中的 DOM、CSS、JS 不会影响到父级,但坏处是当你想覆盖整个窗口来展示一个模态框时,它只会展示在 iframe 那一块区域。...iframe 中的内容需要等待iframe加载后再开始加载,白屏时间长,体验较差。 iframe 中的内容不会增加主页面的搜索权重,影响 SEO。...__IS_FUSION_PLATFORM__ * 若子应用未检测到该控制变量,则认为未处在父应用中,可直接初始化以便独立使用 * 若检测到该控制变量,则认为处在父应用中,等待父应用调用即可 */

    2.6K20

    有哪些前端面试题是面试官必考的_2023-03-15

    跨站脚本 (Cross-Site Scripting, XSS): ⼀种代码注⼊⽅式, 为了与 CSS 区分所以被称作 XSS。...的地址接着向次级域名服务器发送请求,然后会返回通过域名查询到的目标IP,本例子会返回www.test.com的地址Local DNS Server会缓存结果,并返回给用户,缓存在系统中CDN的工作原理: (1)用户未使用...浏览器将CORS分为简单请求和非简单请求:简单请求不会触发CORS预检请求。...服务器在收到浏览器的预检请求之后,会根据头信息的三个字段来进行判断,如果返回的头信息在中有Access-Control-Allow-Origin这个字段就是允许跨域请求,如果没有,就是不同意这个预检请求...它表示预检请求的返回结果可以被缓存多久,单位是秒。该字段只对完全一样的URL的缓存设置生效,所以设置了缓存时间,在这个时间范围内,再次发送请求就不需要进行预检请求了。

    1.6K30

    滴滴前端二面高频面试题合集

    浏览器将CORS分为简单请求和非简单请求:简单请求不会触发CORS预检请求。...服务器在收到浏览器的预检请求之后,会根据头信息的三个字段来进行判断,如果返回的头信息在中有Access-Control-Allow-Origin这个字段就是允许跨域请求,如果没有,就是不同意这个预检请求...它表示预检请求的返回结果可以被缓存多久,单位是秒。该字段只对完全一样的URL的缓存设置生效,所以设置了缓存时间,在这个时间范围内,再次发送请求就不需要进行预检请求了。...1)nginx配置解决iconfont跨域浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置...let 闭包let 会产生临时性死区,在当前的执行上下文中,会进行变量提升,但是未被初始化,所以在执行上下文执行阶段,执行代码如果还没有执行到变量赋值,就引用此变量就会报错,此变量未初始化。

    1.6K50

    一文带你了解跨域的前因后果和解决方案

    跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求,该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。...在预检中,浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。...,这包括"预检请求"(也被称为CORS预检请求)和"OPTIONS请求"。...预检请求是发起一个HTTP OPTIONS请求到服务器,以确认目标资源是否支持跨域。这种机制是为了兼容同源策略而产生的,但有时这种额外的请求会导致性能问题。...1)nginx配置解决iconfont跨域 浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx

    2K10

    一文带你了解跨域的前因后果和解决方案

    跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求,该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。...在预检中,浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。...,这包括"预检请求"(也被称为CORS预检请求)和"OPTIONS请求"。...预检请求是发起一个HTTP OPTIONS请求到服务器,以确认目标资源是否支持跨域。这种机制是为了兼容同源策略而产生的,但有时这种额外的请求会导致性能问题。...1)nginx配置解决iconfont跨域 浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx

    1.8K10
    领券