javascript 创建一个嵌入代码,以允许子公司显示我的网站信息

puruo6ea  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(92)

我试图创建一个脚本(jQuery),我给予一个联盟合作伙伴,这将允许他们显示我的DIV的内容在他们的网站上。
我以前见过这样做,但找不到任何关于执行它的信息。用户会把这个放在他们的网站内容中:

<script src="https//:www.awebsite.com/123UniqueScript.js" type="text/javascript"></script>
<div id="123UniqueID"></div>

这将嵌入到他们的网站,只有他们的网站的东西。
我试着把这个放在谷歌搜索的javascript文件中:

$('#123UniqueID').load('https//:www.awebsite.com #myDIV');

但这给了一个XMLHttpRequest error的联盟网站。
那么我如何允许特定网站使用XMLHttpRequest呢?这是最好的方法吗?

tzdcorbm

tzdcorbm1#

1您需要设置一个CORS策略,允许其他站点访问您的服务器资源。#2您只需使用<iframe>标签,非常简单:

<iframe src="https//:www.awebsite.com#myDIV"></iframe>

此外,在你的标签锚后面有一个空格,不应该是。
阅读更多关于iframe here的信息。
---编辑23.3.14 ---
无论是iframe还是JS脚本,这都是一个没有实际意义的问题。通过使用防火墙规则,任何一种解决方案都可以只为单个主机或子网提供服务。您可以在非标准端口上启动一个简单的Web服务器,并只允许流量到达客户端的IP地址。另一种选择是通过让客户端调用远程脚本,在客户端站点上动态生成HTML。我觉得这也是你想做的
在任何一种情况下,你都需要实现某种形式的访问控制,如果是这样的话,那么我建议你在你的网络服务器上托管一个脚本,并实现一个CORS策略,只允许XSS访问你的客户端的IP地址。
我会这样做。
1.您向客户端提供一个脚本,并向它们提供一个API密钥以访问您的服务器。
1.该脚本通过fetch()请求访问一个API端点,该端点提供可立即呈现的HTML。
1.创建CORS策略以允许客户端的IP。端点验证API密钥。
你并不真的需要钥匙。我想这真的取决于你需要/想把它弄得多安全。
下面是一个示例,说明如何使用Web工作器实现这一点:

const HTML = `
<div>Some content</div>
`

export default {
    async fetch(request, env, ctx) {
        // TODO: Store in env
        const AUTH_HEADER = 'X-Auth-Token';
        const AUTH_KEY = 'a long random string';
        const AUTH_IP = '8.8.8.8';

        if (request.headers.get(AUTH_HEADER) !== AUTH_KEY) {
            // Incorrect key, reject request with Unauthorized code
            return new Response('Unauthorized.', {
                status: 403,
            });
        }

        const data = {
            html: HTML
        }

        return new Response(JSON.stringify(data), {
            headers: {
                'content-type': 'application/json;charset=UTF-8',
                'Access-Control-Allow-Origin': AUTH_IP,
                'Access-Control-Allow-Methods': 'GET,HEAD,POST,OPTIONS',
                'Access-Control-Max-Age': '86400',
            },
        });
    },
};

相关问题