XiaoMo/anyproxy
1
0
Fork 0
mirror of https://github.com/alibaba/anyproxy.git synced 2025-08-04 21:39:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

add Eng. version

Browse Source
This commit is contained in:
OttoMao
2015-08-22 14:57:07 +08:00
parent 3f02d4e9d6
commit b1332afd73
13 changed files with 988 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/i18n.json Normal file
View File

@@ -0,0 +1,71 @@
{
"cn":{
"language":"cn",
"summary":"AnyProxy是一个开放式的HTTP/HTTPS代理，你可以灵活控制各种网络数据",
"featureA":"基于Node.js",
"featureADesc":"全程JavaScript，学习无压力",
"featureB":"支持Https",
"featureBDesc":"明文解析Https请求数据",
"featureBHowTo":"如何配置",
"featureC":"Web界面",
"featureCDesc":"多终端共享，可视化观察每个请求",
"featureD":"规则逻辑（Rule）",
"featureDDesc":"个性化处理规则，定制专属调试工具",
"installationTitle":"安装",
"installationStepA":"安装",
"installationStepB":"可能需要",
"quickStartTitle":"使用",
"quickStartStepA":"运行",
"quickStartStepB":"把浏览器http代理指向 127.0.0.1:8001",
"quickStartStepC":"访问界面：http://127.0.0.1:8002",
"quickStartMoreUsage":"更多用法",
"sampleRuleTitle":"规则文件(rule)样例",
"sampleATitle":"在HTML响应末尾加上\"hello world\"",
"sampleBTitle":"去除请求头的if-modified-since字段",
"sampleCTitle":"为某个请求指定目标IP地址",
"sampleDTitle":"把所有图片响应替换成本地图片",
"ruleGuideText":"阅读：规则文件（Rule）API",
"ruleGuideLink":"https://github.com/alibaba/anyproxy/wiki/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E6%96%B0%E8%BD%AE%E5%AD%90%EF%BC%9Aanyproxy#%E5%BC%80%E6%94%BE%E5%BC%8F%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E8%AE%A1",
"otherFeaturesTitle":"其他特性",
"otherFeatureA":"Map Local，Log Filter等常规功能",
"otherFeatureB":"低网速网速模拟",
"otherFeatureBDesc":"，调试应用在2G/3G下的表现",
"otherFeatureC":"把AnyProxy作为npm模块",
"otherFeatureCDesc":"，基于它做二次开发"
},
"en":{
"language":"en",
"summary":"AnyProxy is a fully configurable http/https proxy in NodeJS, which offers you the ablity to handle http traffic as you wish.",
"featureA":"Based on Node.js",
"featureADesc":"It's all javascript and easy to learn.",
"featureB":"HTTPS supported",
"featureBDesc":"help to decrypted HTTPS data",
"featureBHowTo":"How to config",
"featureC":"Web UI",
"featureCDesc":"Web based interface to view requests",
"featureD":"Customed Rule File",
"featureDDesc":"Make your own debugging tool by writing rule files",
"installationTitle":"Installation",
"installationStepA":"install",
"installationStepB":"may require",
"quickStartTitle":"Quick Start",
"quickStartStepA":"run",
"quickStartStepB":"set proxy to 127.0.0.1:8001 on your browser or device",
"quickStartStepC":"view web interface at http://127.0.0.1:8002",
"quickStartMoreUsage":"More Usage",
"sampleRuleTitle":"Sample of Rule Files",
"sampleATitle":"Append \"hello world\" on HTML response",
"sampleBTitle":"remove if-modified-since from http request header",
"sampleCTitle":"assign a specified ip address for some requests",
"sampleDTitle":"replace all image response by local one",
"ruleGuideText":"Ref : Guide of Rule file",
"ruleGuideLink":"https://github.com/alibaba/anyproxy/wiki/What-is-rule-file-and-how-to-write-one",
"otherFeaturesTitle":"Other Features",
"otherFeatureA":"Map file to local , filter your logs",
"otherFeatureB":"Simulate a low-speed network",
"otherFeatureBDesc":" , help to test the performance of your app on poor network",
"otherFeatureC":"Using AnyProxy as an npm module",
"otherFeatureCDesc":" , to deploy your own debugging tools"
}
}

250
src/index.html Normal file
View File

@@ -0,0 +1,250 @@
<html>
<head>
<title>AnyProxy</title>
<link rel="stylesheet" type="text/css" href="/dest/index.css">
<link rel="shortcut icon" type="image/png" href="/favico.png?t=2" />
<meta name="description" content="A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.">
<meta name="description" content="AnyProxy - 开放式的HTTP/HTTPS代理，你可以灵活控制各种网络数据">
<meta name="keywords" content="代理服务器 Proxy HTTP HTTPS">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script>
//redirect to Chinese version if in China
if(new Date().getTimezoneOffset() == "-480" && !(/(cn|en)/i.test(location.href))){
location.href = "/cn";
}else{
var _hmt = _hmt || []; (function() {var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?4e51565b7d471fd6623c163a8fd79e07"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();
}
</script>
</head>
<body>
<div class="wrapper">
<div class="cornerBtnWrapper">
<a href="/cn">中文</a>|
<a href="/en">English</a>|
<a href="https://github.com/alibaba/anyproxy" target="_blank">View on Github</a>
</div>
<div class="brief">
<div class="logo">
<img src="http://gtms04.alicdn.com/tps/i4/TB1XfxDHpXXXXXpapXX20ySQVXX-512-512.png" width="250" height="250" alt="anyproxy logo" />
</div>
<h2 class="slogan">${summary}</h2>
<div class="action">
<iframe src="https://ghbtns.com/github-btn.html?user=alibaba&repo=anyproxy&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>&nbsp;&nbsp;&nbsp;
<iframe src="https://ghbtns.com/github-btn.html?user=alibaba&repo=anyproxy&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</div>
</div>
<div class="feature">
<div class="featureContent">
<div class="item">
<span class="iconWrapper">
<i class="iconfont">&#xe602;</i>
</span>
<h4>${featureA}</h4>
<h5>${featureADesc}</h5>
</div>
<div class="item">
<span class="iconWrapper">
<i class="iconfont">&#xe601;</i>
</span>
<h4>${featureB}</h4>
<h5>${featureBDesc}<a href="https://github.com/alibaba/anyproxy/wiki/HTTPS%E7%9B%B8%E5%85%B3%E6%95%99%E7%A8%8B" target="_blank"><br>${featureBHowTo}&nbsp;&gt;&gt;</a></h5>
</div>
<div class="item">
<span class="iconWrapper">
<i class="iconfont bigger">&#xe600;</i>
</span>
<h4>${featureC}</h4>
<h5>${featureCDesc}</h5>
</div>
<div class="item">
<span class="iconWrapper">
<i class="iconfont">&#xe604;</i>
</span>
<h4>${featureD}</h4>
<h5>${featureDDesc}</h5>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="quickstart listSection">
<div class="quickstartContent listContent">
<h4 class="subtitle" id="install">${installationTitle}</h4>
<ul>
<li>${installationStepA} <a href="http://nodejs.org/" target="_blank">Node.js</a> &gt;= v0.12</li>
<li><code class="simpleBash">npm install -g anyproxy</code>, ${installationStepB}<code class="simpleBash">sudo</code></li>
<li><a href="https://github.com/alibaba/anyproxy#quick-start" target="_blank">More&gt;&gt;</a></li>
</ul>
<h4 class="subtitle" id="quickstart">${quickStartTitle}</h4>
<ul>
<li>${quickStartStepA}&nbsp;&nbsp;<code class="simpleBash">anyproxy</code></li>
<li>${quickStartStepB}</li>
<li>${quickStartStepC}</li>
<li><a href="https://github.com/alibaba/anyproxy#quick-start" target="_blank">${quickStartMoreUsage}&nbsp;&gt;&gt;</a></li>
</ul>
<a href="https://github.com/alibaba/anyproxy#step-4---launch-web-interface" target="_blank"><img class="screenshot" src="http://gtms01.alicdn.com/tps/i1/TB1IdgqGXXXXXa9apXXLExM2pXX-854-480.gif" width="350"/></a>
</div>
</div>
<div class="sample">
<div class="sampleContent">
<h4 class="subtitle" id="sample ">${sampleRuleTitle}</h4>
<div class="item">
<h5 class="itemTitle">${sampleATitle}</h5>
<pre>
<code class="javascript">
//append "hello world" to all web pages
//file : rule_replace_response_data.js
//run : anyproxy --rule rule_replace_response_data.js
module.exports = {
replaceServerResDataAsync: function(req,res,serverRes,cb){
if(/html/i.test(res.headers['content-type'])){
var newDataStr = serverRes.toString();
newDataStr += "hello world!";
cb(newDataStr);
}
}
};
</code>
</pre>
<span class="figure">
<img src="https://t.alipayobjects.com/images/rmsweb/T1LcphXf0eXXXXXXXX.png" width="350"/>
</span>
<hr />
</div>
<div class="item">
<h5 class="itemTitle">${sampleBTitle}</h5>
<pre>
<code class="javascript">
//remove cache related header
//file : rule_remove_cache_header.js
//run : anyproxy --rule rule_remove_cache_header.js
module.exports = {
replaceRequestOption : function(req,option){
var newOption = option;
delete newOption.headers['if-modified-since'];
return newOption;
}
};
</code>
</pre>
<span class="figure">
<img src="https://t.alipayobjects.com/images/rmsweb/T1ecFhXjxcXXXXXXXX.png" width="350"/>
</span>
<hr />
</div>
<div class="item">
<h5 class="itemTitle">${sampleCTitle}</h5>
<pre>
<code class="javascript">
//assign a specific IP adress for some request
//file : rule_reverse_proxy.js
//run : anyproxy --rule anyproxy --rule rule_reverse_proxy.js
module.exports = {
replaceRequestOption : function(req,option){
var newOption = option;
if(newOption.headers.host == "www.taobao.com"){
newOption.hostname = "192.168.1.3";
newOption.port = "80";
}
return newOption;
}
};
</code>
</pre>
<span class="figure">
<img src="https://t.alipayobjects.com/images/rmsweb/T1hsxhXeddXXXXXXXX.png" width="350"/>
</span>
<hr />
</div>
<div class="item">
<h5 class="itemTitle">${sampleDTitle}</h5>
<pre>
<code class="javascript">
//replace all the images with local one
//file : rule_use_local_data.js
//run : anyproxy --rule anyproxy --rule rule_use_local_data.js
var fs = require("fs"),
img = fs.readFileSync("sample.jpg");
module.exports = {
shouldUseLocalResponse : function(req,reqBody){
if(/\.(png|gif|jpg|jpeg)$/.test(req.url)){
req.replaceLocalFile = true;
return true;
}else{
return false;
}
},
dealLocalResponse : function(req,reqBody,callback){
if(req.replaceLocalFile){
callback(200, {"content-type":"image/png"},img );
}
}
};
</code>
</pre>
<span class="figure">
<img src="https://t.alipayobjects.com/images/rmsweb/T1Zr4hXeXhXXXXXXXX.png" width="350"/>
</span>
</div>
<div class="readmoreBtn">
<a href="${ruleGuideLink}" target="_blank">&gt;&gt;&nbsp;${ruleGuideText}</a>
</div>
</div>
</div>
<div class="readMore listSection">
<div class="listContent">
<h4 class="subtitle" id="otherfeature">${otherFeaturesTitle}</h4>
<ul>
<li>${otherFeatureA}</li>
<li><a href="https://github.com/alibaba/anyproxy#throttling">${otherFeatureB}</a>${otherFeatureBDesc}</li>
<li><a href="https://github.com/alibaba/anyproxy#work-as-a-module-for-nodejs" target="_blank">${otherFeatureC}</a>${otherFeatureCDesc}</li>
</ul>
{@if language == "cn"}
<h4 class="subtitle" id="ref">相关阅读</h4>
<ul>
<li><a href="https://github.com/alibaba/anyproxy/wiki/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E6%96%B0%E8%BD%AE%E5%AD%90%EF%BC%9Aanyproxy" target="_blank">代理服务器的新轮子</a>，介绍AnyProxy的设计初衷，以及它的开放式设计可以解决什么问题。</li>
<li><a href="http://www.infoq.com/cn/presentations/alipay-hybrid-application-quality-assurance-practice" target="_blank">QCon - 《支付宝hybrid应用质量保证实践》</a>，涉及到AnyProxy在测试工程中的应用(By 陈晔)</li>
</ul>
{@/if}
</div>
</div>
<div class="learnMore listSection">
<div class="btnWrapper">
<h4 class="subtitle white" id="readmore">Read More</h4>
<a class="actionBtn actionBtnWhite" href="https://github.com/alibaba/anyproxy" target="_blank">https://github.com/alibaba/anyproxy</a>
</div>
</div>
<div class="footer"></div>
</div>
<link rel="stylesheet" type="text/css" href="/dest/github.css" />
<script src="/dest/lib.js"></script>
<script type="text/javascript">
Zepto(document).ready(function() {
Zepto('.sample code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
</body>
</html>

0
src/index.js Normal file
View File

407
src/index.less Normal file
View File

@@ -0,0 +1,407 @@
@main : #00AAEE;
@dark : #326EEB;
@gray : #F9F9F9;
@darkGray : #DEDEDE;
@textDark : #5A5A5A;
@textLight: #777;
@wideContent : 1200px;
@normalContent : 890px;
@wideContentMobile : 100%;
@normalContentMobile : 100%;
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1440130445_6601267.eot'); /* IE9*/
src: url('//at.alicdn.com/t/font_1440130445_6601267.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/font_1440130445_6601267.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/font_1440130445_6601267.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_1440130445_6601267.svg#iconfont') format('svg'); /* iOS 4.1- */
}
i.iconfont{
font-family: "iconfont";
font-style: normal;
}
body{
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrapper{
.cornerBtnWrapper{
position : absolute;
right : 10px;
top : 10px;
z-index : 1;
width: 100%;
text-align: right;
color: @textDark;
}
.cornerBtnWrapper a{
display: inline-block;
margin-right: 10px;
margin-left : 10px;
}
a,
a:hover{
text-decoration: none;
}
a{
font-size: 16px;
color: @main;
}
h4.subTitle{
font-size: 30px;
margin: 0;
padding: 50px 0 10px 0;
width: 100%;
text-align: center;
color: @textDark;
}
h4.subTitle.white{
color: #FFF;
}
code{
display: inline-block;
}
.actionBtn.actionBtnWhite{
color: #FFF;
border: 1px solid #FFF;
}
.actionBtn.actionBtnWhite:hover{
background: @gray;
color: @dark;
}
.actionBtn{
color: @dark;
border: 1px solid @dark;
line-height: 30px;
font-size: 30px;
padding: 20px 45px;
border-radius: 30px;
display: inline-block;
transition:0.3s;
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
font-size:16px;
padding: 10px 20px;
}
}
.actionBtn:hover{
background: @dark;
color: @gray;
}
}
.wrapper>div{
width: 100%;
min-width: @normalContent;
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
min-width: @normalContentMobile;
}
}
.brief{
height: 300px;
text-align: center;
padding: 100px 0;
position: relative;
margin-top: 20px;
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
padding: 60px 0 90px;
}
.slogan{
font-size: 16px;
color: @textDark;
padding: 0 20px;
}
}
.feature{
background: @darkGray;
.featureContent{
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
width: @wideContentMobile;
}
width: @wideContent;
margin: 0 auto;
.item{
padding: 30px 0 20px;
width: 280px;
/*border: 1px solid #AAA;*/
margin: 0 10px;
float: left;
box-sizing:border-box;
-webkit-box-sizing:border-box;
font-size: 30px;
text-align: center;
}
.iconWrapper{
display: inline-block;
line-height: 40px;
width: 70px;
text-align: center;
font-size: 40px;
color: @textDark;
}
.iconWrapper .bigger{
font-size: 44px;
}
h4{
color: @textDark;
margin: 12px auto 2px;
font-size: 20px;
}
h5{
color: @textLight;
margin: 0;
}
h5,
a{
font-size: 14px;
line-height: 20px;
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
.item{
padding: 20px 0;
float :none;
margin : 0 auto;
font-size : 24px;
}
.iconWrapper{
font-size: 25px;
line-height: 25px;
}
.iconWrapper .bigger{
font-size: 30px;
}
h4{
font-size: 16px;
margin: 4px;
}
}
}
}
.quickstart{
background: @gray;
.quickstartContent{
position: relative;
}
.screenshot{
position: absolute;
right: 0;
bottom: 0;
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
display : none;
}
}
code.simpleBash{
font-family: monospace;
font-weight: bold;
color: #333;
padding: 0;
}
}
.listSection{
.listContent{
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
width: @normalContentMobile;
}
width: @normalContent;
margin: 0 auto;
}
ul{
margin: 0 auto;
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
padding: 0 20px 0 30px;
}
}
li{
color: @textDark;
font-size: 16px;
line-height: 40px;
}
}
.sample{
background: @gray;
.sampleContent{
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
width: @normalContentMobile;
}
width: @normalContent;
margin: 0 auto;
}
.item{
margin: 10px;
}
.itemTitle{
font-size: 16px;
margin: 0px 10px;
color: @textDark;
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
margin :0;
}
}
.figure{
vertical-align: top;
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
display: block;
margin: 0 auto;
text-align: center;
}
}
pre{
margin: 0;
display: inline-block;
vertical-align: top;
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
width: 100%;
}
}
code{
width: 495px;
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
width:100%;
margin: 0 auto;
word-wrap: break-word;
padding: 0;
}
}
hr{
border: none;
border-top: 1px solid @textLight;
width: 80%;
margin: 0 auto;
padding: 15px 0;
}
.readmoreBtn{
margin-left: 10px;
padding-bottom: 20px;
}
}
.readMore{
background: @gray;
padding-bottom: 50px;
}
.learnMore{
background: @dark;
text-align: center;
position: relative;
padding: 120px 0;
@media only screen
and (min-device-width: 320px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2){
padding: 70px 0;
}
h4.subtitle{
padding: 0;
margin-bottom: 30px;
}
.btnWrapper{
text-align: center;
}
}