javascript 内容安全策略:页面设置阻止了资源的加载

lnlaulya  于 12个月前  发布在  Java
关注(0)|答案(1)|浏览(128)

我在ReactJS Web客户端中实现了Google Sign-In按钮。成功登录后,页面无法从“https://accounts.google.com/...”重定向回我的Web客户端URL,即http://localhost:5000。
这是来自浏览器控制台日志:

Navigated to http://localhost:3000/login
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
POSThttp://localhost:3000/login
[HTTP/1.1 404 Not Found 17ms]

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/favicon.ico (“default-src”).

字符串
这是我从here复制的GoogleAuth按钮的代码

import { useEffect, useRef } from 'react'

const loadScript = (src) =>
    new Promise((resolve, reject) => {
        if (document.querySelector(`script[src="${src}"]`)) return resolve()
        const script = document.createElement('script')
        script.src = src
        script.onload = () => resolve()
        script.onerror = (err) => reject(err)
        document.body.appendChild(script)
    })

const GoogleAuth = () => {
    // Refer Google Identity API documentation from https://developers.google.com/identity/gsi/web/reference/js-reference#ux_mode

    const googleButton = useRef(null);

    useEffect(() => {
        const src = 'https://accounts.google.com/gsi/client'
        const id = "<I gave valid ClientID>"

        // Load Google sign-in page by redirecting the page.
        loadScript(src)
            .then(() => {
                /*global google*/
                console.log(google)
                google.accounts.id.initialize({
                    client_id: id,
                    ux_mode: "redirect",
                    login_uri: window.location,
                    callback: handleCredentialResponse,
                })
                google.accounts.id.renderButton(
                    googleButton.current,
                    { theme: 'outline', size: 'large' }
                )
            })
            .catch(console.error)

        return () => {
            const scriptTag = document.querySelector(`script[src="${src}"]`)
            if (scriptTag) document.body.removeChild(scriptTag)
        }
    }, [])

    function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
    }

    return (
        <div ref={googleButton}></div>
    )
}

export default GoogleAuth


我没有看到回调“验证CredentialResponse”的控制台日志。
我错过了什么?如何在不禁用浏览器安全功能的情况下解决此问题?

dldeef67

dldeef671#

把它作为一个社区,为他人的利益。
正如@Govind Avireddi所说:
我通过将Google登录页面更改为弹出页面而不是使用选项:ux_mode: popup来实现它。

相关问题