① 怎麼使用yuicompressor2.4.2.jar進行js,CSS進行代碼混淆
目前開發Web應用javascript發揮的作用越來越大,相關的Javascript框架也比較多。但是有一個問題,我們開發過程中,所有的JS代碼都添加了注釋,如使用JsDoc,代碼的可讀性比較強,同時這樣的代碼也便於調試。但是在產品環境中,我們希望這些JS代碼是壓縮和混淆過的,這主要是讓 JS代碼載入的更快,這也是Google AJAX Libraries API出現的原因。YUI Compressor 是一款由 Yahoo 公司開發的、功能非常強大的 JS、CSS 代碼混淆和壓縮工具,採用Java開發,目前很多Javascript Framework都使用YUI Compressor進行代碼分發。
二、使用簡介:
在命令行下執行 Java 程序,運行 yuicompressor jar 軟體包,來完成任務:
//壓縮JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//壓縮CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css
三、參考官方英文注釋:
3.1 How does the YUI Compressor work?
The YUI Compressor is written in Java (requires Java >= 1.4) and relies on Rhino to tokenize the source JavaScript file. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, omitting as many white space characters as possible, and replacing all local symbols by a 1 (or 2, or 3) letter symbol wherever such a substitution is appropriate (in the face of evil features such as eval or with, the YUI Compressor takes a defensive approach by not obfuscating any of the scopes containing the evil statement) The CSS compression algorithm uses a set of finely tuned regular expressions to compress the source CSS file. The YUI Compressor is open-source, so don't hesitate to look at the code to understand exactly how it works.
3.2 Using the YUI Compressor from the command line
java -jar yuicompressor-x.y.z.jar
Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]
Global Options
-h, --help Displays this information
--type <js|css> Specifies the type of the input file
--charset <charset> Read the input file using <charset>
--line-break <column> Insert a line break after the specified column number
-v, --verbose Display informational messages and warnings
-o <file> Place the output into <file>. Defaults to stdout.
JavaScript Options
--nomunge Minify only, do not obfuscate
--preserve-semi Preserve all semicolons
--disable-optimizations Disable all micro optimizations
GLOBAL OPTIONS
-h, --help
Prints help on how to use the YUI Compressor
--line-break
Some source control tools don't like files containing lines longer than,
say 8000 characters. The linebreak option is used in that case to split
long lines after a specific column. It can also be used to make the code
more readable, easier to debug (especially with the MS Script Debugger)
Specify 0 to get a line break after each semi-colon in JavaScript, and
after each rule in CSS.
--type js|css
The type of compressor (JavaScript or CSS) is chosen based on the
extension of the input file name (.js or .css) This option is required
if no input file has been specified. Otherwise, this option is only
required if the input file extension is neither 'js' nor 'css'.
--charset character-set
If a supported character set is specified, the YUI Compressor will use it
to read the input file. Otherwise, it will assume that the platform's
default character set is being used. The output file is encoded using
the same character set. IMPORTANT: if you do not supply this argument
and the file encoding is not compatible with the system's default
encoding, the compressor will throw an error. In particular, if your
file is encoded in utf-8, you should include this parameter.
-o outfile
Place output in file outfile. If not specified, the YUI Compressor will
default to the standard output, which you can redirect to a file.
-v, --verbose
Display informational messages and warnings.
JAVASCRIPT ONLY OPTIONS
--nomunge
Minify only. Do not obfuscate local symbols.
--preserve-semi
Preserve unnecessary semicolons (such as right before a '}') This option
is useful when compressed code has to be run through JSLint (which is the
case of YUI for example)
--disable-optimizations
Disable all the built-in micro optimizations.Note: If no input file is specified, it defaults to stdin.
The following command line (x.y.z represents the version number):
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.jswill minify the file myfile.js and output the file myfile-min.js. For more information on how to use the YUI Compressor, please refer to the documentation included in the archive.
The charset parameter isn't always required, but the compressor may throw an error if the file's encoding is incompatible with the system's default encoding. In particular, if your file is encoded in utf-8, you should supply the parameter.
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8
四、YUI Compressor 壓縮 JavaScript 的原理
YUI Compressor 壓縮 JavaScript 的內容包括:
1.移除注釋
2.移除額外的空格
3.細微優化
4.標識符替換(Identifier Replacement)
YUI Compressor 包括哪些細微優化呢?
• object["property"],如果屬性名是合法的 JavaScript 標識符(註:合法的 JavaScript 標識符——由一個字母開頭,其後選擇性地加上一個或者多個字母、數字或下劃線)且不是保留字,將優化為: object.property
• {"property":123},如果屬性名是合法的 JavaScript 標識符且不是保留字,將優化為 {property:123} (註:在對象字面量中,如果屬性名是一個合法的 JavaScript 標識符且不是保留字,並不強制要求用引號引住屬性名)。
• 'abcd/'efgh',將優化為 "abcd'efgh"。
• "abcd" + "efgh",如果是字元串相連接,將優化成 "abcdefgh"(註:所有在使用 YUI Compressor 的前提下,對於腳本中的字元串連接,使用連接符 「+」 的效率和可維護性最高)。
對於 JavaScript 最有效的壓縮優化,當屬標識符替換。
比如:
(function(){function add(num1, num2) {return num1 + num2;}})();
進行屬標識符替換後:
(function(){function A(C, B) {return C+ B;}})();
再移除額外的空格,最終成了:
(function(){function A(C,B){return C+B;}})();
YUI Compressor 標識符替換僅替換函數名和變數名,那哪些不能被替代呢?
1.原始值:字元串、布爾值、數字、null 和 undefined。一般來說字元串占的空間最多,而非數字字面量其次(true、false,null,underfinded)。
2.全局變數:window、document、XMLHttpRequest等等。使用最多的就是 document、window。
3.屬性名,比如:foo.bar。占據的空間僅次於字元串,」.」 操作符無法被代替,且 a.b.c 更加費空間。
4.關鍵字。經常被過度使用的關鍵字有:var、return。最好的優化方法:一個函數僅出現一次 var 和 return 關鍵字。
對於原始值、全局變數、屬性名的優化處理方式大致相同:任何字面量值、全局變數或者屬性名被使用超過 2 次(包括2次),都應該用局部變數存儲代替。
但有部分情況下是禁止使用標識符替換的:
1.使用 eval() 函數。解決方法:不使用或者創建一個全局函數封裝 eval()。
2.使用 with 語句。解決方法:方法同上。
3.JScript 的條件注釋。唯一解決的方法:不使用。
由於 YUI Compressor 是建立在 rhino interpreter 基礎上的,所以上述所有的優化都是安全的。
② 求助前端JS都是用什麼加密的
寫過js混淆器,談一些淺顯的個人看法。個人認為,js的不可讀化處理分為三個方面:壓縮(compression)、混淆(obfuscation)和加密(encryption)。(不可讀化處理,這是我自己發明的術語,一切會增加代碼不可讀性的代碼轉換,都可以這么叫,「增加代碼不可讀性」可能是代碼轉換的結果或者目的).1.壓縮這一操作的目的,是讓最終代碼傳輸量(不代表代碼量,也不代表文件體積)盡可能小。壓縮js的工具,常見的有:YUICompressor、UglifyJS、GoogleClosureCompiler等。通常在代碼壓縮的過程中,只改變代碼的語法,代碼的語義和控制流不會有太大改變。常見做法是把局部變數縮短化,把一些運算進行等價替換等。代碼壓縮對於代碼保護有一些幫助,但由於語義和控制流基本沒變,起不了太大作用。在壓縮層面上,代碼不可讀只是一種附帶傷害,不是最終目的。2.混淆這一操作的目的,是讓代碼盡可能地不可讀,主要用作代碼保護。讓代碼不可讀,增加分析的難度,這是唯一目的。混淆過後文件體積變大一倍也沒關系,代碼量變多也沒關系,運算慢50%也沒關系。常見的做法有:分離常量、打亂控制流、增加無義代碼、檢查運行環境如果不對就罷工,等等。在混淆層面上,代碼不可讀是最終目的。值得一提的是,GoogleClosureCompiler的AdvanceLevelCompression會壓縮類和對象的成員,其壓縮結果很難分析,也可以認為是一種混淆,但兼容性不太好。廣告時間:我寫的js混淆器,中文名叫「看起來很厲害的JS編譯器」,英文名叫做TheImpressiveJS.Segment.Compiler,看起來很厲害的JS編譯器。3.加密說實話我很難對加密做一個定義,因為加密在Web界有太多歧義了。有加密就有解密,意味著加密操作可逆,密文可以明文化。就這樣看來,在Web界,可以稱之為加密的東西包括:HTTPS傳輸、JavaScript實現對稱加密或者不對稱加密等等。這樣看來,不可逆的代碼壓縮和混淆就不能列入加密這個范疇了。非要找一個可以稱之為加密,又經常被人誤解為壓縮和混淆的東西,DeanEdwards的DeanPacker/Unpacker可以拿來做個例子。比如我們把varnum=1;alert(num);輸入DeanPacker,pack一下,得到這么一串東西,是不是看著非常像被壓縮和混淆過的代碼?把上面那串意義不明物拿來unpack一下,得到了原文。實際上DeanPacker只是對源碼進行了一個字元串變換,沒有深入到代碼語法層面,你可以拿"Helloworld,你好師姐"來試試。用OnlineJavaScriptbeautifier能輕松把這串東西還原為「Helloworld,你好師姐」。可以看出,代碼加密意味著:將代碼明文進行可逆的變換(加密),生成密文;將密文進行逆變換(解密),可以還原明文;最終運行環境運行的是解密代碼。結語實際上大家對壓縮、混淆、加密這三個概念還是挺不清晰的,我在這里說一些個人見解,希望有幫助。在現實項目中,我是多種手段結合的:對於不需要做代碼保護的項目,比如個人博客,做代碼壓縮,加快載入速度,這就夠了。對於需要做一些代碼保護,防止抄襲的項目,可以在源碼中加入一些開發者的信息和防護代碼,然後混淆和壓縮。很不幸的是,我這方面總是做得不太好,防君子防不了小人啊哈哈。對於需要嚴格加密的項目,可以用混淆、壓縮、加密、簽名檢查等多種手段,這我就不清楚了,等大嬸來補充。
③ 壓縮後的JS代碼怎樣解壓縮
一般壓縮都經過混淆,如果你看到變數名都是A,B,C,D之類的無規則的命名,那就是被混淆過的,一般來說也很難閱讀,就算你 還原了格式。
如果是沒有混淆的,你可以試試用js的格式化工具來重新格式化一下的,比如:
/* 美化:格式化代碼,使之容易閱讀 */
/* 凈化:去掉代碼中多餘的注釋、換行、空格等 */
/* 壓縮:將代碼壓縮為更小體積,便於傳輸 */
/* 解壓:將壓縮後的代碼轉換為人可以閱讀的格式 */
/* 混淆:將代碼的中變數名簡短化以減小體積,但可讀性差,經混淆後的代碼無法還原 */
/* 如果有用,請別忘了推薦給你的朋友: */
/* javascript在線美化、凈化、壓縮、解壓:http://tool.lu/js */
/* 以下是演示代碼 */
var Inote = {};
Inote.JSTool = function(options) {
this.options = options || {};
};
Inote.JSTool.prototype = {
_name: 'Javascript工具',
_history: {
'v1.0': ['2011-01-18', 'javascript工具上線'],
'v1.1': ['2012-03-23', '增加混淆功能'],
'v1.2': ['2012-07-21', '升級美化功能引擎'],
'v1.3': ['2014-03-01', '升級解密功能,支持eval,window.eval,window["eval"]等的解密'],
'v1.4': ['2014-08-05', '升級混淆功能引擎'],
'v1.5': ['2014-08-09', '升級js壓縮引擎'],
'v1.6': ['2015-04-11', '升級js混淆引擎']
},
options: {},
getName: function() {return this._name;},
getHistory: function() {
return this._history;}
};
var jstool = new Inote.JSTool();
④ 火狐有沒有JS 反混淆,反壓縮的工具
尊敬的用戶,您好!很高興為您答疑。
js混淆的原理其實還是字元替換和運算符重寫,而這個混淆規則是完全由編寫者自己定義的,也就是說如果您沒有混淆規則,基本無法將混淆後的代碼恢復到易閱讀狀態。
希望我的回答對您有所幫助,如有疑問,歡迎繼續咨詢我們。
⑤ js代碼混淆 以及 混淆後如何使用
js反混淆需要藉助第三方工具:
1、在網路搜索js混淆還原
2、把要還原的代碼放在第一個文本框,點擊js解混淆就可以了。
結果在下面顯示
⑥ 請問這個js是由什麼方式加密混淆的如何解密
前面的\x只是16進制編解碼就好
function decode(str){
return str.replace(/\\x(\w{2})/g,function(_,$1){ return String.fromCharCode(parseInt($1,16)) });
}
後面的使用壓縮混淆工具,壓縮了空格,簡化了變數名.是可以格式化回去的,但是變數你想還原到原來的有含義的命名,是不可能的了
⑦ 給js,css代碼壓縮,混淆工具只有在線的嗎,沒有軟體嗎
軟體應該也有,可以自己找找,只是應該還需要自己配置(大部分代碼編輯器僅支持實時編譯),還是需要自己手動。大部分人都選擇自己動手寫處理任務(例如gulp任務、grunt任務)。
⑧ vs code有沒有壓縮混淆js代碼的擴展
有的。安裝好以後,在js裡面按F1,就能壓縮代碼,壓縮好的代碼就當前目錄下面生成一個 xxx.min.js
網頁鏈接
⑨ 網站發布的時候批量混淆,壓縮JS代碼用什麼工具
此代碼純屬裝B用,就是js的各種類型間轉換,記住js的數據類型(這里用到的):[ObjectObject]falsetrueundefined然後把他們轉成string,通過數組下標取值,在字元串拼接就成了!如:!![]+[];//true+[];//0組合:(!![]+[])(+[]);//就是『t'
⑩ UglifyJS怎麼混淆js
如果你是全局安裝的,可以直接在需要混淆文件的目錄下,
按住shift鍵右擊滑鼠選擇在此處打開命令窗口如圖
新建test.js開始測試
varUglifyJS=require('uglify-js');
//代碼壓縮
varresult=UglifyJS.minify("varb=function(){};",{fromString:true});
console.log("
===========================");
console.log(result);
//文件壓縮
result=UglifyJS.minify(["demo.js"]);
console.log("
===========================");
console.log(result.code);
//多文件壓縮,指定sourcemap和網站來源
result=UglifyJS.minify(["main.js","demo.js"],{
outSourceMap:"out.js.map",
sourceRoot:"http://onbook.me",
mangle:true
});
console.log("
===========================");
console.log(result.code);
console.log(result.map);