如何为内容/样式发生一些变化的外部网站提供服务？

Posted 2023-03-06

【中文标题】如何为内容/样式发生一些变化的外部网站提供服务？

【英文标题】：How to serve an external website with some changes in content/style?

【发布时间】：2019-01-24 21:11:57

【问题描述】：

我正在尝试建立一个信息亭，允许人们使用这个URL 来打印收据。所以我必须隐藏标题和其他允许退出页面的链接。

这是我到目前为止尝试过的，但没有成功：

带有将 css 附加到页面的 JS 脚本的 iframe：由于 CORS 政策而失败。 在 localhost 上使用 Apache 或 nginx 代理通过 iframe 绕过 CORS 块：仍在尝试。 file_gets_content + str_replace 的 php：修复了所有 404 错误，但结果仍然是空白页。

这是代码：

<?php
$content = file_get_contents('https://www.lottomatica.it/scommesse/avvenimenti');
$content = str_replace(
    '</title>',
    '</title><base href="https://www.lottomatica.it/">', 
$content);
$content = str_replace(
    '/etc/',
    'https://www.lottomatica.it/etc/', 
$content);
$content = str_replace(
    '/content/',
    'https://www.lottomatica.it/content/', 
$content);
$content = str_replace(
    '</head>',
    '<style>
        header 
            display: none!important;
        
    </style>
    </head>', 
$content);
echo $content; ?>

我不需要使用特定技术，只需拉取页面内容、隐藏页眉和其他一些部分并在本地主机上为 Chrome Kiosk 应用程序提供服务。任何帮助将不胜感激！

【问题讨论】：

您可以使用api.jquery.com/load 从外部站点中提取特定元素，但它不会带来样式或类似的东西。也许这对你有用。

忘了提到你需要在 URL 中使用 #elementId 来获取那个元素

你可以对他们的 css url 做同样的事情来拉下他们的样式的副本......

@TJBlackman 不错的专业提示，我必须记住这一点。老实说，在别人指出之后很明显，但有人不是我。

大声笑 - 最好只检查 CSS，然后复制您需要的内容。然后你可以编辑它并避免过多的代码开销，但是......当你懒惰时，抓住一切！

【参考方案1】：

我为我们使用的播客提要生成服务做了一些类似的事情。我们将我们的内容发布给他们，他们为提要生成所有 xml 标记，但我想在我们的服务器上托管提要并让它看起来像我们所做的一切。

我正在使用使用sub_filter 模块构建的 Nginx，我的位置块如下所示：

location /podcast 
    sub_filter_types text/xml;
    sub_filter '<atom:link href="http://<provider-url>/path/podcast/'  '<atom:link href="https://my-website.com/podcast/';
    sub_filter '<link>http://<provider-url>/path/</link>' '<link>https://my-website.com/</link>';
    sub_filter_once off;
    sub_filter_last_modified on;
    proxy_set_header Accept-Encoding "";
    proxy_pass https://<provider-url>/path/podcast/;

另一种选择是您可以在 Nginx 中设置一个位置块，将他们的站点未更改地代理到您服务器上的一个 url，然后将您现有的 javascript 代码指向该 url。然后，您将获得没有 CORS 问题的内容，但是任何查看控制台的人都可以在打开该链接时找出内容的来源。

【参考方案2】：

老话题，只是想分享一下我的经验。

尝试了不同的解决方案。第一个工作是使用 chrome devtools 在启动时注入自定义 css 和 js。它工作正常，但效率低下，并且在 6 小时以上的会话期间还会导致一些随机崩溃。

最后一个工作且目前在生产中的解决方案也很优雅，它使用自定义 chrome 扩展，将特定 css/脚本添加到特定页面，还包含自定义函数、处理程序、更新、身份验证等的代码。

希望这可以帮助某人。