贡献者24
粉丝0
説明 window.postMessage()方法可以安全地實現Window對象之間的跨域通信。例如，在一個頁面和它生成的彈出窗口之間，或者是頁面和嵌入其中的iframe之間。 通常情況下，不同頁面上的腳本允許彼此訪問，當且僅當它們源自的頁面共享相同的協議，端口號和主機（也稱為“同源策略”）。window.postMessage()提供了一個受控的機制來安全地規避這個限制（如果使用得當的話）。 一
昵称 毛瑞
在項目中遇到頁面中嵌入IFrame（主頁面和框架頁為不同域名）時，由於同源策略，主頁面和IFrame內頁無法通訊的問題。 同源策略是一個很重要的安全理念，它在保證數據的安全性方面有着重要的意義。同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。那怎樣是相同的域呢？當兩個域具有相同的協議(如http), 相同的端口(如80)，相同的host（如www.ex
昵称 Even
簡介 一個利用html5的跨域api postMessage解決一個系統中，多個iframe跨域通信交互的js庫。 github地址 ：cross-domain 背景 最初公司只有一個系統來做銷售，隨着公司業務越來越多，搭建很多類似的系統（這些系統本來是沒有任何關係的，每個系統目前都非常複雜）。 由於目前公司戰略有調整，原來的銷售是針對某種產品，現在銷售工作要針對客户進行多產品的銷售促成，這樣一個
昵称 zhoutao
平時在開發中總是會遇到各種跨域問題，一直沒有很好地瞭解其中的原理，以及其各種實現方案。今天在這好好總結一下。 本文完整的源代碼請猛戳github博客，建議大家動手敲敲代碼。 1、什麼是跨域？為什麼會有跨域？ 一般來説，當一個請求url的協議、域名、端口三者之間任意一個與當前頁面地址不同即為跨域。 之所以會跨域，是因為受到了同源策略的限制，同源策略要求源相同才能正常進行通信，即協議、域名、端口
昵称 Alan
1、jsonp jsonp解決跨域問題的本質：script標籤可以請求不同域名下的資源，即script請求不受瀏覽器同源策略影響。 !DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titl
昵称 浪遏飛舟
1、jsonp jsonp解決跨域問題的本質：script標籤可以請求不同域名下的資源，即script請求不受瀏覽器同源策略影響。 !DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titl
昵称 浪遏飛舟
項目需求： 一個項目兩個域名其中a.com域名，嵌套了b.com域名 當進入b頁面的時候就要切換到b.com域名，同時需要保持在a域名下的登陸狀態 解決：使用ifram + postMessage 主頁面 a域名 a域名下要協商ifram 標籤 iframe id="child" ref="iframBox" src="http://127.0.0.1:8082/#/mediatio
昵称 那年
前言 在低代碼編輯器中進行頁面預覽常常不得不用到iframe進行外鏈的url引入，這就涉及到了預覽頁面與編輯器頁面數據通信傳值的問題，常常用到的方案就是postMessage傳值，而postMessage本身在eventloop中也是一個宏任務，就會涉及到瀏覽器消息隊列處理的問題，本文旨在針對項目中的postMessage的相關踩坑實踐進行總結，也為想要使用postMessage傳遞數據的童鞋提供
昵称 維李設論
朋友的網站有個需求：要從 A 域名遷移到 B 域名。所有內容不變，只是更改域名。這個需求不復雜，理論上改下配置然後 301 即可。但這個網站是純靜態網站，用户數據都存在 localStorage 裏，所以他希望能夠自動幫用户把數據也遷移到新域名。 我們知道，localStorage 是按照域名存儲的，B 網站無法訪問 A 網站的 localStorage。所以我們就需要一些特殊的手段來實現需求。經
昵称 Meathill
安裝插件 npm i -D http-proxy-middleware 在你前端工程根目錄中創建以下兩個文件 api/proxy.js // api/proxy.js // 該服務為 vercel serve跨域處理 const { createProxyMiddleware } = require('http-proxy-middleware') module.exports = (req,
昵称 淺嵐
情景復現 某天正式環境有用户反饋某頁面操作沒有任何響應，SRE接收到反饋後，對問題分析復現，復現步驟如下： 用户登錄商家工作台後複製頁籤，開啓了兩個頁籤，其中一個頁簽退出登錄，另一個頁籤點擊操作 另外，SRE還收集了控制枱輸出錯誤信息： 問題分析 根據報錯信息來看，明顯提示重定向後的請求跨域了。當時我認為設置了Loacation標頭的Http 302重定向響應，瀏覽器地址欄會接着訪問重定向後的
昵称 浪遏飛舟
在 Web 前後端分離架構模式下，跨域（跨源）請求屬於日常的基本情況了。瀏覽器出於安全考慮，會限制 JavaScript（簡稱 JS）腳本內發起跨源 HTTP 請求，同源沒有此類限制。前端解決跨域方法有很多，比如 WebSocket 協議跨域、JSONP 請求跨域和跨域資源共享 CORS 等。 1、CORS 簡介 CORS 全稱為 Cross-Origin Resource Sharing，被譯為
昵称 範家鵬
前言 跨域這兩個字就像一塊狗皮膏藥一樣黏在每一個前端開發者身上，無論你在工作上或者面試中無可避免會遇到這個問題。如果在網上搜索跨域問題，會出現許許多多方案，這些方案有好有壞，但是對於闡述跨域的原理和在什麼情況下需要用什麼方案，缺少系統性的説明。大家在工作中可能因為大佬們已經配置好了，不會產生跨域，但是作為一個前端的開發人員，面對跨域的問題，還是需要從原理上去理解跨域的原因，在不同的情況中，我們該如
昵称 京東雲開發者
跨端動態化開發方案重要性日益凸顯，本文對我們團隊MCube動態化實踐做了總結，為大家提供經驗和借鑑。 接入背景 隨着我們工程的需求迭代，暴露出了業務需求量大，分端開發和發版更新成本高等痛點，使用H5頁面來代替，在用户體驗和性能相較原生有差異，所以我們團隊開始了對動態化改造的研究。 在做過一些列動態化開發的嘗試，並對多種方案進行調研後，我們選擇了MCube的動態化方案。之所以選用MCube，是因為它
昵称 京東雲開發者
前言 字節 Web Infra 團隊最近開啓新一輪招聘了，如果你對 Web Framework/Runtime/Performance，或對編譯構建/Rust/AI 感興趣，可以來看看我們的崗位（具體崗位信息可以看這個招聘鏈接 👉 字節跳動 Web Infra - Web Solutions 團隊招人啦！） 簡歷可以發到我的郵箱 skychx@hotmail.com，我可以幫你內推崗位並跟
昵称 鹵代烴
記 Accept-Language: "zh-CN" 引發的思考 先説結論： "CORS 安全列表請求標頭"，不僅僅指 請求頭的 key，也約束了 key 對應的值域 現象 在開發過程中遇到，當 Accept-Language 被錯誤改成 "zh-CN" 時，會導致頁面請求跨域。 而當設置成 zh-CN（沒有被雙引號包裹）時，請求正常發出，沒有跨域。 疑
昵称 momo707577045
個人博客：無奈何楊（wnhyang） 個人語雀：wnhyang 共享語雀：在線知識共享 Github：wnhyang - Overview 參考 Spring Cloud Gateway CORS 方案看這篇就夠了-騰訊雲開發者社區-騰訊雲 九種跨域方式實現原理（完整版） - 掘金 什麼是跨域，有哪些解決方法 以下為AI回答 跨域是指由於瀏覽器的安全機制，當一個頁面嘗試通過 XMLHttpReq
昵称 wnhyang
大家好，我是vue-fabric-editor開源圖片編輯器項目的作者，很多開發者都會問我圖片跨域的問題如何處理，今天就詳細的跟大家分享一下fabric.js圖片跨域怎麼處理。 問題現象 會報兩種錯誤，要麼保存新圖片時報錯，要麼插入圖片時報錯： 圖片插入到畫布成功了，畫布保存新圖片時報錯。 圖片無法插入到畫布，直接提示CORS報錯。 先説結論：必須後端設置跨域，然後前端也設置跨越，才能
昵称 秦少衞
首先會提到三個概念：客户端、代理服務器、目標服務器。 代理服務器是客户端與目標服務器之間的橋樑，不管是正向代理還是反向代理，客户端向目標服務器請求資源，都是通過代理服務器去承擔一箇中間人的職責。 正向代理與反向代理的區別我會用一個例子説明。 某人（客户端） 跑腿（代理服務器） A地（目標服務器A） B地（目標服務器B） 正向代理： 某人-跑腿：你去A地幫我買一斤麪包來。 （客户端在請求資源時要
昵称 要出家的鍵盤
什麼是跨域？ **説起跨域，就要知道什麼是瀏覽器同源策略 **瀏覽器同源策略：必須是協議、域名、端口完全一致的才符合同源策略 **如果以上三項，有一項不同都涉及到跨域問題 為什麼瀏覽器要設置同源策略呢？ 沒有同源策略限制的兩大危險場景 瀏覽器是從兩個方面去做這個同源策略的，一是針對接口的請求，二是針對Dom的查詢。 沒有同源策略限制的接口請求 沒有同源策略限制的接口請求通常是因為開發者或服
昵称 被表白的生薑
大家好，我是 V 哥，HTTP 請求實現跨域，會出現安全問題，下面來聊一聊這個問題。 HTTP 請求實現跨域 一、跨域的概念 跨域是指瀏覽器從一個域名的網頁去請求另一個域名的資源時，由於同源策略的限制而出現的安全機制。同源策略要求協議、域名、端口完全相同，只要有一個不同，就會產生跨域問題。 二、實現 HTTP 請求跨域的常見方法 CORS（跨域資源共享） 服務器端設置：在服務
昵称 威哥愛編程
大家好，我是 V 哥，跨域問題是應用開發中比較常見的問題，比如前端應用和後端業務的端口不同，前端要向後端發送請求來獲取數據，這個時候就會產生跨域問題，V 哥先從跨域問題的產生開始，來詳細介紹跨域問題及解決方案。 CORS跨域問題的產生原因 CORS（Cross-Origin Resource Sharing，跨域資源共享）跨域問題源於瀏覽器的同源策略。同源策略是瀏覽器的一種安全機制，它要求瀏覽器在
昵称 威哥愛編程
1. CORS 產生的原因 CORS 全稱為（Cross-Origin Resource Sharing：跨站資源共享），跨域請求是由於瀏覽器的同源策略（Same-Origin Policy）引起的，那麼 CORS 的產生和瀏覽器的同源策略有關係，我們先了解什麼是同源策略。 2. 什麼是同源策略 SOP 是所有的現代瀏覽器都具備的安全措施，它不允許從一個加載的js腳本和資源的 Origin 域與另
昵称 打盹的猴子
摘要：同源策略就是指必須在同一個協議，域名，端口號下，而且三者必須一致的。 本文會從以下幾個方面講述同源策略： 第一點 what：什麼是同源策略 第二點 why：為什麼需要同源策略 第三點 how：如何解決經典的跨域問題 什麼是同源策略 什麼是同源策略呢？通常一個概念出來之後，我會從生活的實際例子找到解析，你可以想象一下，假如你們家的房子，是不是不允許陌生人進入，如果可以隨便進入，那麼久有可能被盜
昵称 華為雲開發者聯盟
