微信授權PC掃碼登陸,掃碼成功後重定向被谷歌瀏覽器禁止

微信授權PC掃碼登陸,掃碼成功後重定向被谷歌瀏覽器禁止

說明

PC掃碼登陸,手機掃碼成功點擊確定後,PC端沒動靜~~
在這裏插入圖片描述
重複多次後,胖胖仔細一看右上角。。重定向被禁止了!!!
在這裏插入圖片描述
由於二維碼是iframe內嵌到頁面中

<iframe style={{border:0,width:"100%",height:430,}} src={this.state.url} />

到這裏就有必要提一嘴iframe中的sandbox屬性,重點來了!

sandbox屬性

如果被規定爲空字符串(sandbox=""),sandbox 屬性將會啓用一系列對行內框架中內容的額外限制。
sandbox 屬性的值既可以是一個空字符串(應用所有的限制),也可以是空格分隔的預定義值列表(將移除特定的限制)。
sandbox有很多屬性,目前已經研究的屬性有:""、 allow-same-origin、allow-top-navigation、 allow-forms、allow-scripts,接下來分別說下每個屬性的作用。

  • sandbox=""
    表示應用allow-same-origin、allow-top-navigation、 allow-forms、allow-scripts等限制。
  • sandbox="allow-scripts"
    允許執行script腳本。
  • sandbox="allow-forms"
    允許提交表單。
  • sandbox="allow-top-navigation"
    允許 iframe 內容從包含文檔導航(加載)內容。
  • sandbox="allow-same-origin"
    允許 iframe 內容被視爲與包含文檔有相同的來源。

解決方案及思路

在iframe標籤中給sandbox設置allow-scripts以及allow-top-navigation屬性

<iframe sandbox="allow-scripts allow-top-navigation" style={{border:0,width:"100%",height:430,}} src={this.state.url} />

OK!問題圓滿解決!希望可以幫到看到此文的你()。我是胖胖,不瘦回150斤不改名字的男人!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章