HTML注入到别人的网站？答案

【问题标题】：HTML injection into someone else's website?HTML注入到别人的网站？
【发布时间】：2014-04-07 18:14:45
【问题描述】：

我有一个嵌入网站的产品，类似于 Paypal（客户将我的按钮添加到他们的网站，用户点击此按钮，一旦服务完成，我会将他们重定向回原始网站）。

我想向客户演示我的技术，而无需实际修改他们的实时网站。为此，是否可以配置 http://stackoverflow.myserver.com/ 使其镜像 http://www.stackoverflow.com/ 同时无缝注入我的按钮？

意思是，我想演示在实时网站上使用我的按钮的体验，而无需在我的服务器上实际重新托管客户的数据库。

我知道这里存在安全问题，所以只要我们满足要求，请随时提及它们。我不需要为使用 HTTPS 的网站演示这个。

更具体地说，我想通过在页面中注入一个 Paypal 按钮来展示有关 Stackoverflow 问题的财务奖励的想法。我如何在不修改 https://stackoverflow.com/ 的情况下演示这个 http://stackoverflow.myserver.com/？

重开请求：我已根据您的要求将问题改写为更具体。如果您仍然认为它过于宽泛，请通过在下面发表评论来帮助我理解您的推理。

更新：我在How to rewrite URLs referenced by Javascript code?发布了后续挑战

UPDATE2：我放弃了小书签和 Greasemonkey 的想法，因为它们需要客户端安装/修改。我们需要使流程尽可能无缝，否则许多人会被流程关闭，不会让我们推销。

【问题讨论】：

您可以使用服务器端代码将远程页面内容作为原始 HTML 获取，然后将您自己的 HTML 注入其中并显示最终结果。
@ShadowWizard，请将此作为答案发布，以便我们更详细地讨论。
需要先附上一些示例代码，让它变得充实，也许同时你会得到更好的建议。 :)
@ShadowWizard CSS 和 JS 文件呢？
我可能会考虑创建一个书签。

标签： html demo html-injections

【解决方案1】：

我建议使用HTTP handler 创建代理。

在ProcessRequest 中，您可以执行HttpWebRequest 以获取另一侧的内容，对其进行更改并将调整后的html 返回给浏览器。您可以重写里面的 url 以允许从原始源加载图像等。

public void ProcessRequest(HttpContext context)
{
  // get the content using HttpWebRequest
  string html = ...

  // alter it

  // write back the adjusted html
  context.Response.Write(html);
}

【讨论】：

感谢您的帖子。客户网站是否需要允许此类事情的跨域请求才能工作？还有其他我需要注意的安全问题吗？
@Gili：我不知道，因为您只是假装自己是网站并使用几乎相同的 html 为浏览器提供服务。我没有看到任何问题。（我自己做过一次代理 http 流量并包含 Windows 凭据，它工作正常）
有趣。因此，为了 100% 明确：我会提供 HTML 文件，但任何数据库请求都会转到客户的网站？
@Gili：绝对是的！事实上，你的行为就像一个基于软件的路由器。
优秀的答案。谢谢！在将答案标记为已接受之前，我会再等几天，但您的答案看起来像是最佳候选人。再次感谢。

【解决方案2】：

如果您在客户端进行演示并希望快速破解它，您可以使用一些 jQuery 来完成它。我在 SO 标志后按了一下按钮只是为了演示。您可以在控制台中输入：

$('head').append('<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>')
$('#hlogo').append('<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay" target="PPDGFrame" class="standard"><label for="buy">Buy Now:</label><input type="image" id="submitBtn" value="Pay with PayPal" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif"><input id="type" type="hidden" name="expType" value="light"><input id="paykey" type="hidden" name="paykey" value="insert_pay_key">')
var embeddedPPFlow = new PAYPAL.apps.DGFlow({trigger: 'submitBtn'});

现在，我不确定我是否做错了什么，因为我在最后一部分得到了这个错误：

Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped.

但无论如何，如果你正在演示，你可以这样做，也许作为 B 计划。（你也可以为此编写一个用户脚本，这样你就不必打开控制台，我猜？）

【讨论】：

您仍然会使用服务器端重写来实现这一点，对吧？
不，这将是客户端。当您说演示时，我以为您的意思是您将亲自进行演示。
没有。我计划通过电子邮件向客户发送一个链接，以便他们可以在自己的时间使用它。不过，您的回答可能会让其他想要亲自演示的人感兴趣，所以我会继续关注。

【解决方案3】：

在玩了很长时间之后，我最终做了以下事情：

即时重写 HTML 和 JS 文件。所有其他资源均由原始网站托管。
对于 HTML 文件，注入一个 <base> 标签，指向被重定向的网站。这将导致浏览器自动将相关链接（在 HTML 文件、CSS 文件甚至 Flash 中！）重定向到原始网站。
对于 JS 文件，应用正则表达式来修补指向写入 URL 的特定代码部分。我在浏览器中加载重定向页面，查找损坏的链接，并找出需要修补 JS 的哪个部分来解决问题。

这听起来比实际上要困难得多。平均而言，修补每个页面需要不到 5 分钟的时间。

最大的发现是<base> 标签！它代表我更正了绝大多数链接。

【讨论】：