NodeJSの前後端分離に基づく思考と実践(四)安全問題解決案
16946 ワード
前言
前と後の分離の開発モードでは、開発の役割と機能から、最も明白な変化は:従来の伝統は、ブラウザ環境の中開発の前端の学生だけを担当しています.目の前にある基礎的な問題は、どうやってWebセキュリティを保障するかです.
本稿では、フロントエンドの分離モードのアーキテクチャの下で、フロントエンドのWeb開発において、発生した安全問題と対策と注意事項について、解決策を提案する.
クロススクリプト攻撃(XSS)の防御
問題と解決の考え方
クロススクリプト攻撃(XSS、Cross-site scripting)は、最も一般的で基本的なWebサイトを攻撃する方法である.攻撃者は、ウェブページ上で攻撃的なコードを含むデータを発行し、閲覧者がこのウェブページを見ていると、特定のスクリプトは閲覧者ユーザのアイデンティティと権限で実行されます.XSSにより、ユーザデータを比較的容易に修正し、ユーザ情報を盗み取り、他のタイプの攻撃をもたらすことができる.例えば、CSRF攻撃.
XSS攻撃を予防する基本的な方法は、HTMLページに出力されたデータがHTML形式で転送されることを確認することです.たとえば、以下のテンプレートコード:
解決方法は簡単です.つまり、descriptionの値をescapeとして行います.変換後の出力コードは以下の通りです.
Midwayのソリューション
変換ページで全ユーザが出力するデータ
データを変換するには、以下のような状況と方法があります.
1.テンプレート内部で提供される仕組みを使って変換する
ミッドウェー内部ではテンプレート言語としてKISSY xtemplateを使用しています.
xtemplate実施において、文法的には2つの括弧({val})を使ってテンプレートデータを解析し、デフォルトはデータをHTML変換するものであるので、開発者はテンプレートをこのように書くことができる.
2.Midwayで明確な転義関数の呼び出し
開発者はNode.jsプログラムまたはテンプレートで、Midwayから提供されたHTML変換方法を直接呼び出して、表示されたデータを転送してもいいです.
方法1:Node.jsプログラムでデータをHTML変換する
推荐:xtemplateを使うなら、直接テンプレートに内蔵されている{}を使って転送することを提案します.他のテンプレートを使うなら、Security.escapeHtmlを使って転送することをおすすめします.
フィルタページでユーザーが出力するリッチテキスト
実際には、いくつかのメッセージボードや掲示板など、ユーザーに簡単なフォントサイズ、色、背景などの機能を提供したいですが、このようなリッチな文はもともとXSSを防ぐためにはどうすればいいですか?
1.MidwayのSecurityが提供するrichText関数を使用する
MidwayはrichTextの方法を提供しています.専門的にリッチテキストをフィルタリングして、XSS、釣り、クッキーの盗撮などの穴を防止します.
伝言板があります.テンプレートコードは次のようになります.
び し はescapeHtmlと ています. の2つの があります.
1: Node.jsプログラムで び す
のXSS の があるルートを る.
ページのテンプレートにはXSS が する があるほか、Webアプリケーションには にもいくつかの があり、リスクがあります.
1.エラーページの
ページが つからない 、システムは404 Not Foundのエラーを するかもしれません. えば、http://localhost/page/not/found
404 NotFound Page/page/not/found does not exsitは らかです. はこのページを して、このような を できます.http://localhost/%3Cscript%3Ealert%28%27hello%27%29%3C%2Fscript%3Eをクリックし、 を します.エラーページで を しないと、 に していたalert('hello')が されます.
expressでは、404ページを する は の りです.
ここでは、 がエラーページ(404または のエラー )に する が です.エラーメッセージの にパス が まれている (より にはユーザが を している )は、 ずescapeHtmlを います.
その 、エラー の メカニズムは、Midwayフレームレベルで します.
Midwayソリューションの
その のテンプレートエンジン
Midwayはデフォルトではxtemplateテンプレートをサポートしていますが、 は のテンプレートをサポートする もあります. えば、jade、mustache、ejsなどが のテンプレートでは、デフォルトの と されない の き を しています.
escapeに するその のサポート
ページに された のデータとリッチテキストデータの に、いくつかのシーンにも が な があります.Midwayは のような な を しています.
ScapeHtmlフィルタで されたHTMLの は、XSSホールJsEnccodeが したStringに してJavaScript を います. に してunicode を います.シングルクォーテーションマーク、ダブルクォーテーションスコプJSON を しないescape は、JSON の のnameとvauleに してのみescapeeml JEnceを します.
前と後の分離の開発モードでは、開発の役割と機能から、最も明白な変化は:従来の伝統は、ブラウザ環境の中開発の前端の学生だけを担当しています.目の前にある基礎的な問題は、どうやってWebセキュリティを保障するかです.
本稿では、フロントエンドの分離モードのアーキテクチャの下で、フロントエンドのWeb開発において、発生した安全問題と対策と注意事項について、解決策を提案する.
クロススクリプト攻撃(XSS)の防御
問題と解決の考え方
クロススクリプト攻撃(XSS、Cross-site scripting)は、最も一般的で基本的なWebサイトを攻撃する方法である.攻撃者は、ウェブページ上で攻撃的なコードを含むデータを発行し、閲覧者がこのウェブページを見ていると、特定のスクリプトは閲覧者ユーザのアイデンティティと権限で実行されます.XSSにより、ユーザデータを比較的容易に修正し、ユーザ情報を盗み取り、他のタイプの攻撃をもたらすことができる.例えば、CSRF攻撃.
XSS攻撃を予防する基本的な方法は、HTMLページに出力されたデータがHTML形式で転送されることを確認することです.たとえば、以下のテンプレートコード:
alert('hello')'
解決方法は簡単です.つまり、descriptionの値をescapeとして行います.変換後の出力コードは以下の通りです.
alert("hello!")
Midwayのソリューション
変換ページで全ユーザが出力するデータ
データを変換するには、以下のような状況と方法があります.
1.テンプレート内部で提供される仕組みを使って変換する
ミッドウェー内部ではテンプレート言語としてKISSY xtemplateを使用しています.
xtemplate実施において、文法的には2つの括弧({val})を使ってテンプレートデータを解析し、デフォルトはデータをHTML変換するものであるので、開発者はテンプレートをこのように書くことができる.
2.Midwayで明確な転義関数の呼び出し
開発者はNode.jsプログラムまたはテンプレートで、Midwayから提供されたHTML変換方法を直接呼び出して、表示されたデータを転送してもいいです.
方法1:Node.jsプログラムでデータをHTML変換する
var Security= require('midway-security');
//data from server，eg {html:''，other:""}
data.html =Security.escapeHtml(data.html);
xtpl = xtpl.render(data);
推荐:xtemplateを使うなら、直接テンプレートに内蔵されている{}を使って転送することを提案します.他のテンプレートを使うなら、Security.escapeHtmlを使って転送することをおすすめします.
フィルタページでユーザーが出力するリッチテキスト
実際には、いくつかのメッセージボードや掲示板など、ユーザーに簡単なフォントサイズ、色、背景などの機能を提供したいですが、このようなリッチな文はもともとXSSを防ぐためにはどうすればいいですか?
1.MidwayのSecurityが提供するrichText関数を使用する
MidwayはrichTextの方法を提供しています.専門的にリッチテキストをフィルタリングして、XSS、釣り、クッキーの盗撮などの穴を防止します.
伝言板があります.テンプレートコードは次のようになります.
{{{message}}}
び し はescapeHtmlと ています. の2つの があります.
1: Node.jsプログラムで び す
message =Security.richText(message);
var html = xtpl.render(message)
Security.richText({{{message}}})
のXSS の があるルートを る.
ページのテンプレートにはXSS が する があるほか、Webアプリケーションには にもいくつかの があり、リスクがあります.
1.エラーページの
ページが つからない 、システムは404 Not Foundのエラーを するかもしれません. えば、http://localhost/page/not/found
404 NotFound Page/page/not/found does not exsitは らかです. はこのページを して、このような を できます.http://localhost/%3Cscript%3Ealert%28%27hello%27%29%3C%2Fscript%3Eをクリックし、 を します.エラーページで を しないと、 に していたalert('hello')が されます.
expressでは、404ページを する は の りです.
ここでは、 がエラーページ(404または のエラー )に する が です.エラーメッセージの にパス が まれている (より にはユーザが を している )は、 ずescapeHtmlを います.
その 、エラー の メカニズムは、Midwayフレームレベルで します.
Midwayソリューションの
その のテンプレートエンジン
Midwayはデフォルトではxtemplateテンプレートをサポートしていますが、 は のテンプレートをサポートする もあります. えば、jade、mustache、ejsなどが のテンプレートでは、デフォルトの と されない の き を しています.
escapeに するその のサポート
ページに された のデータとリッチテキストデータの に、いくつかのシーンにも が な があります.Midwayは のような な を しています.
ScapeHtmlフィルタで されたHTMLの は、XSSホールJsEnccodeが したStringに してJavaScript を います. に してunicode を います.シングルクォーテーションマーク、ダブルクォーテーションスコプJSON を しないescape は、JSON の のnameとvauleに してのみescapeeml JEnceを します.
var jsonText ="{\"\":\"<script>\"}";
<br> console.log(SecurityUtil.escapeJson(jsonText));// {"<script>":"<script>"}
<br> var jsonText ="{\" \":\"<script>\"}";
<br> console.log(SecurityUtil.escapeJsonForJsVar(jsonText));//{\"\u4f60\u597d\":\"<script>\"}
<br> var str ="alert(\" \")";
<br> console.log(SecurityUtil.jsEncode(str));// alert(\"\u4f60\u597d\")
<br>
</div>
<p></p>
<p><span style="color: #ff0000"><strong> (CSRF) </strong></span></p>
<p><strong> </strong></p>
<p> ： ： ； a 、ajax 、form ， HTML form 。</p>
<p> （CSRF，Cross-site request forgery） 。 ， ， 。</p>
<p> ，CSRF XSS ， ： 。</p>
<p> CSRF </p>
<p>1. 。GET ， GET ， POST ， JavaScript ； ， form POST ， 。<br> 2. ， ， 。<br> </p>
<p> </p>
<p> (1) -> (2) -> (3) -> (4)<br> CSRF ， 2 </p>
<p> 2 (1) -> (2) -> (3)<br> ， CSRF 。 ？ 2 ， 。 ：</p>
<p> (1) -> ， token token session (2) -> ， token (3) -> token session token， ， ， <br> ， ， session ， token ； ， token ， ， 。</p>
<p><strong>Midway </strong></p>
<p><strong> GET </strong></p>
<p> GET ， ； a href img src ， POST ， 。</p>
<p><strong> CSRF token </strong></p>
<p> Midway session token ， Midway ， token server ， 。 ：</p>
<p><a href="https://img. .com/image/info11/e9ad8be00428451395c9239d9f16e107.jpg" target="_blank"><img id="theimg" alt=" NodeJS （ ） _ 1 " src="https://img. .com/image/info11/e9ad8be00428451395c9239d9f16e107.jpg" width="650" height="451" style="border:1px solid black;"></a></p>
<p> ： Midway ，Node.js session ， Midway token ； ， 。</p>
<p> ： Midway ， request token ， ， token， Midway ， 。</p>
<p><strong> </strong></p>
<p> Web ， ， ， Midway framework 。</p>
<p><strong>HTTP Headers <br> </strong>CRLF Injection CRLF ， ， script <br> cookie， cookie ， ， cookie ， <br> cookie cookie JavaScript(XSS ) ， cookie http only， cookie <br> cookie ， WebX ； Midway cookie ， WebX check</p>
<p><strong> Node.js</strong></p>
<p>XSS ， 70% ； Node.js ， ， 。</p>
<p> 。</p>
<p>var mod = fs.readFileSync('path'); path ， /etc/password， ， <br> var result = eval(jsonVal); jsonVal json， <br> …… ， <br> </p>
<p> ， ， ， ， ； ， 。</p>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"></span>
</div>
</div>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1176551583580762112"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">