如何從您無權訪問的網站編輯HTML？

在Chrome開發工具中，您可以編輯並對樣式元素進行持久更改。如何從您無權訪問的網站編輯HTML？

https://developer.chrome.com/devtools/docs/workspaces

您也可以編輯從任何網站的任何HTML和實時預覽，排序編輯任何網站，包括你不擁有或有權訪問的。

但是，至少對於我來說，我想持久地編輯HTML，而不僅僅是樣式元素。我怎樣才能做到這一點？

更具體地說，我想要改變靜態資源的URL，就好像它們在CDN上一樣。

現在：

Request: http://www.targetsite.tld/ 
<html> 
<img src="http://www.targetsite.tld/image1.jpg"> 
</html>

目標：

Request: http://www.targetsite.tld/ 
<html> 
<img src="http://testcdn.tld/targetsite.tld/image1.jpg"> 
</html>

Hosts文件的編輯將無法正常工作，初始請求不會再去解析到正確的服務器。我真的想從現有服務器加載文檔，而不是將整個源文件保存在某個地方，然後編輯它。

我發現了這個nodejs腳本，但仍然充滿希望，我可以在瀏覽器的客戶端更簡單地實現某些功能。

http://www.deanmao.com/2012/08/28/modify-a-site-you-dont-own/

我也許需要某種瀏覽器擴展的，讓我來標記特定的DOM元素節點，寫一些重寫對他們來說，保存此配置文件，然後重新加載頁面。

是否有這樣的事情存在？

來源

2015-06-26 JayMcTee

我認爲使用nginx設置一個非常簡單的代理並將流量從http：// www.targetsite.tld重定向到它會更容易。 –

謝謝，我想我可以儘管它會增加我和真正的服務器之間的http請求，我不需要修改。它會修改所有內容的整個路由，即使我只想編輯1％的HTML輸出。 – JayMcTee

我想我要回答我自己的問題了......使用諸如「html編輯器」等短語搜索瀏覽器插件沒有產生任何有用的東西。現在我意識到正確的語義是userscripts。這導致我的Greasemonkey for FireFox（我不記得名字）和Tampermonkey for Chrome。我會稍微多說一點，看看其他人是否還有其他建議。 – JayMcTee

答案是用戶腳本。特別是，FireFox的GreaseMonkey和Chrome的TamperMonkey。這些是瀏覽器插件/擴展，它允許您使用簡單的JavaScript來實現您的目標，從而在您訪問的頁面上操作DOM元素。

這條路，我實現了我的目標，有一點需要注意：

瀏覽器首先分析原始的HTML，因此然後進行一切爲它找到原始的源頁面上的資產HTTP請求。只有這樣用戶腳本才能操作內容。您對用戶腳本進行的任何編輯都會在原始HTML之後加載。所以在我的情況下：

<img src="http://www.targetsite.tld/image1.jpg">

原始圖像從原始主機獲取請求。然後在TamperMonkey我的用戶腳本操縱的網址，導致瀏覽器比還要求我的新IMG：

<img src="http://testcdn.tld/targetsite.tld/image1.jpg">

換句話說，它並沒有那麼多的替換圖像，它重複的要求，改變第二一。這當然會影響性能測量等。所以要小心。

來源

2015-06-30 09:23:02 JayMcTee

如何從您無權訪問的網站編輯HTML？

回答

相關問題