Skip to content

Commit 7714701

Browse files
shimosshimos
committed
Add Japanese translation for labs/csp1
This patch adds Japanese translation for docs/labs/csp1.html Signed-off-by: Taku SHIMOSAWA <[email protected]>
1 parent b7eda0c commit 7714701

File tree

2 files changed

+223
-0
lines changed

2 files changed

+223
-0
lines changed

‎docs/labs/csp1.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ info =
77
{
88
present: "import",
99
text: "Yes, many JavaScript implementations support an import statement. However, in this exercise we will use a require form. Please use that instead.",
10+
text_ja: "確かに多くのJavaScript実装はimport文をサポートしています。しかし、この演習では代わりにrequireを使いましょう。",
1011
examples: [
1112
[
1213
"import express from \"express\";"
@@ -16,10 +17,12 @@ info =
1617
{
1718
absent: "const",
1819
text: "Start with const.",
20+
text_ja: "constから始めてください。",
1921
},
2022
{
2123
absent: String.raw`const\s+helmet =`,
2224
text: "Create a constant name named helmet using the form const helmet = ...",
25+
text_ja: "const helmet = ... という形でhelmetという名前の定数を定義してください。",
2326
examples: [
2427
[ "const" ],
2528
[ "consthelmet = " ]
@@ -28,13 +31,15 @@ info =
2831
{
2932
present: String.raw`require \( helmet \)`,
3033
text: "The parameter of a requirement statement must be string. Surround the term helment with double-quotes.",
34+
text_ja: "require文のパラメータは文字列でなければなりません。helmetをダブルクォーテーションで囲んでください。",
3135
examples: [
3236
[ " const helmet = require(helmet);" ]
3337
],
3438
},
3539
{
3640
absent: "; $",
3741
text: "JavaScript doesn''t require semicolon terminators, but the rest of the code uses them. You should try to match a coding style when modifying existing code unless there''s an important reason not to. Please update the first statment.",
42+
text_ja: "JavaScriptでは末尾のセミコロンは必須ではありませんが、このコードの他の部分では使用しています。特に重要な理由がない限り、コーディングスタイルに合わせるようにしてください。最初の文を修正してください。",
3843
examples: [
3944
[ " const helmet = require(\"helmet\")" ]
4045
],
@@ -43,13 +48,15 @@ info =
4348
absent: String.raw`\s* app \. use \( helmet \( \{`,
4449
index: 1,
4550
text: "Your code should begin with app.use(helmet({",
51+
text_ja: "app.use(helmet({ でコードを始めてください。",
4652
},
4753
{
4854
absent: String.raw`\s* app \. use \( helmet \( \{
4955
contentSecurityPolicy: \{ \s*
5056
`,
5157
index: 1,
5258
text: "Your code should begin with:\napp.use(helmet({\n contentSecurityPolicy: {\n",
59+
text_ja: "app.use(helmet({\n contentSecurityPolicy: {\nというコードで始めてください。",
5360
},
5461
{
5562
absent: String.raw`\s* app \. use \( helmet \( \{
@@ -58,6 +65,7 @@ info =
5865
`,
5966
index: 1,
6067
text: "Your code should begin with:\napp.use(helmet({\n contentSecurityPolicy: {\n directives: {\n",
68+
text_ja: "app.use(helmet({\n contentSecurityPolicy: {\n directives: {\nというコードで始めてください。",
6169
},
6270
{
6371
absent: String.raw`\s* app \. use \( helmet \( \{
@@ -67,25 +75,30 @@ info =
6775
`,
6876
index: 1,
6977
text: "Your code should continue with:\napp.use(helmet({\n contentSecurityPolicy: {\n directives: {\n \"script-src\": [\"'self'\", \"https://example.com\"],\n",
78+
text_ja: "コードの続きは、\napp.use(helmet({\n contentSecurityPolicy: {\n directives: {\n \"script-src\": [\"'self'\", \"https://example.com\"],\nとしてください。",
7079
},
7180
{
7281
absent: String.raw`"style-src": \[ "'self'" \]
7382
`,
7483
index: 1,
7584
text: "Don't forget to include \"style-src\": [\"'self'\"]\n",
85+
text_ja: "\"style-src\": [\"'self'\"] を忘れないでください",
7686
},
7787
{
7888
absent: "; $",
7989
index: 1,
8090
text: "JavaScript doesn''t require semicolon terminators, but the rest of the code uses them. You should try to match a coding style when modifying existing code unless there''s an important reason not to. Please update the second statement to use a semicolon terminator.",
91+
text_ja: "JavaScriptでは末尾のセミコロンは必須ではありませんが、このコードの他の部分では使用しています。特に重要な理由がない限り、コーディングスタイルに合わせるようにしてください。二番目の文をセミコロンで終わるように修正してください。",
8192
},
8293
{
8394
absent: String.raw`\} \} \) \) ; $`,
8495
index: 1,
8596
text: "The correct answer is expected to end with `} } ) ) ;` ignoring whitespace. Check that you have matching parentheses and braces.",
97+
text_ja: "正解はスペースを無視すると } } ) ) ; という形で終わるはずです。括弧が対応していることを確認してください。",
8698
},
8799
{
88100
text: "I do not have more specific hints to provide. Please ensure that the parentheses, braces, and brackets pair correctly, as that is often the problem.",
101+
text_ja: "ちょうどよいヒントがありません。括弧類の組が正しいことを確認してください。よくあるミスです。",
89102
},
90103
],
91104
expected: [

‎docs/labs/ja_csp1.html

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://best.openssf.org/assets/css/style.css">
8+
<link rel="stylesheet" href="checker.css">
9+
<script src="checker.js"></script>
10+
<script src="csp1.js"></script>
11+
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
12+
13+
<!-- See create_labs.md for how to create your own lab! -->
14+
15+
</head>
16+
<body>
17+
<!-- For GitHub Pages formatting: -->
18+
<div class="container-lg px-3 my-5 markdown-body">
19+
<h1>ラボ演習 csp1</h1>
20+
<p>
21+
これはセキュアなソフトウェア開発に関するラボ演習です。
22+
ラボの詳細については、<a href="introduction.html" target="_blank">概要</a>をご覧ください。
23+
24+
<p>
25+
<h2>タスク</h2>
26+
<p>
27+
<b>下記のサーバーサイドのJavaScriptのWebアプリケーションに、コンテンツセキュリティポリシー(CSP)に関する設定を加えて、セキュリティを強化するヘッダが出力されるようにコードを変更してください。</b>
28+
29+
<p>
30+
<h2>背景</h2>
31+
<p>
32+
この演習では、サーバーサイドのWebアプリケーションに対して、セキュリティヘッダを追加します。
33+
このサーバーサイドプログラムは、Expressフレームワーク(バージョン4)を使用してJavaScriptで書かれています。
34+
ここでは、Expressアプリケーションにハードニングヘッダを追加する<a href="https://helmetjs.github.io/"></a><tt>helmet</tt></a>ライブラリを使います。
35+
36+
<p>
37+
<h2>タスクの詳細</h2>
38+
<p>
39+
40+
<p>
41+
まず最初に<tt>helmet</tt>ライブラリをロードしなければなりません。
42+
JavaScriptではいくつもの方法があります。
43+
今回は、<tt>require</tt>ステートメントを用いて、ライブラリをロードします。
44+
下記のコードで、Expressをrequireしている行を参考にして、それと同じようにhelmetをrequireする行を作成してください。
45+
46+
<p>
47+
次にhelmetを使ってハードニングするヘッダを挿入するコードを書く必要があります。
48+
Expessでは、<tt>app.use(...)</tt>を呼び出すことによって、全てのリクエストに対して何かを行わせることができます。
49+
下記のように、helmetの単純な呼び出しによって、多くのハードニングヘッダをセットアップすることも可能です。
50+
51+
<pre>
52+
app.use(helmet());
53+
</pre>
54+
55+
<p>
56+
しかし、一般的には、アプリケーションに合わせた特別な設定を行う必要があります。
57+
58+
helmet()には、設定を表すオブジェクトをオプショナルな引数として与えることができます。
59+
JavaScriptにおいて、オブジェクトは<tt>{</tt> ... <tt>}</tt>という形で表現し、
60+
中にキーと値のペアをコンマで区切って与えます。
61+
キーと値のペアは、フィールドの名前、コロン(:)、その値という形になります。
62+
63+
<p>
64+
今回は、コンテンツセキュリティポリシー(CSP)の設定を変更します。
65+
これは、<tt>contentSecurityPolicy</tt>という名前のフィールドに値を設定することで指定できます。
66+
その値はさらに別のオブジェクトとなっています。
67+
まとめると、下記のような形になるでしょう。
68+
69+
<pre>
70+
app.use(helmet({
71+
contentSecurityPolicy: {
72+
}
73+
}));
74+
</pre>
75+
76+
<p>
77+
<tt>contentSecurityPolicy</tt>に対する値のオブジェクトも、<tt>directives</tt>のようないろいろなフィールドを持つことができます。
78+
この<tt>directives</tt>(ディレクティブ)フィールドは、さらにJavaScriptオブジェクトを値として持ちます。
79+
80+
<p>
81+
<tt>directives</tt>フィールドの値となるオブジェクトは、一つ以上のキーをとります。
82+
今回は、次の二つのキーを設定します。
83+
84+
<ul>
85+
<li>"script-src": このキーは、
86+
<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">CSP script-srcディレクティブ</a>を設定します。このディレクティブは、JavaScriptがクライアントで動作する際に有効なソースを指定するものです。
87+
他のセキュリティに関する設定と同じように、最小の権限となるように設定するとよいでしょう。
88+
<li>"style-src": このキーは、CSP style-srcディレクティブを設定します。このディレクティブは、スタイルシートをロードする際の有効なソースを指定します。
89+
</ul>
90+
91+
<p>
92+
JavaScriptの文法のクセとして、上記のようなハイフン("-")を含むキーを設定する場合には、ダブルクォーテーションで囲んで文字列として書く必要があります。
93+
94+
<p>
95+
"script-src"に対しては、今回は<tt>["'self'", "https://example.com"]</tt>という配列を設定します。
96+
これは、JavaScriptがこのサーバー<i>もしくは</i><tt>https://example.com</tt>というWebサイトからのみ実行可能で、それ以外からは実行できない、ということを意味します。
97+
<tt>'self'</tt>は、これ自体がシングルクォーテーションで囲まれていることに注意してください。
98+
なお、インラインのJavaScriptの利用を許可する"unsafe-inline"を加えることもできます。
99+
しかし、今回の例では追加しません。というのは、"unsafe-inline"を加えないほうがはるかに安全であるからです。
100+
CSPの"script-src"に値が設定されていて"unsafe-inline"が含まれていない場合には、HTMLのどこかに埋め込まれたJavaScriptは<i>実行されない</i>ということになります。
101+
これは、セキュリティとして大変すばらしいことです。攻撃者はサーバーに細工をして、生成されるHTMLに何かを紛れ込ませるということを良く行いますが、この設定であれば、それがスクリプトなら実行されることがないということになります。
102+
103+
<p>
104+
"style-src"については、<tt>["'self'"]</tt>を設定します。これは、スタイルシートがこのサイトから<i>のみ</i>ロードできる(それ以外からはロードされない)ということを表します。
105+
こちらも、"unsafe-include"を加えませんでした。これによって、HTMLに埋め込まれたCSSは無視されることになります。
106+
これはセキュリティとして良いことで、攻撃者がサーバーに細工をしてCSSコマンドを埋め込んだとしても、それらのコマンドは無視されることになります。
107+
108+
<p>
109+
必要に応じて、「ヒント」ボタンと「諦める」ボタンを使用してください。
110+
111+
<!-- TODO: Discuss inline -->
112+
113+
<!--
114+
???
115+
<pre>
116+
app.use(helmet({
117+
contentSecurityPolicy: {
118+
directives: {
119+
"script-src": ["'self'", "https://example.com"],
120+
"style-src": ["'self'"]
121+
},
122+
}
123+
}));
124+
</pre>
125+
126+
Please change the code below so the query parameter
127+
<tt>id</tt> <i>must</i> be an integer between 1 and 9999 (including
128+
those numbers).
129+
130+
<p>
131+
To do that,
132+
after the first parameter to <tt>app.get</tt>
133+
which says <tt>'/invoices'</tt>,
134+
add a new comma-separated parameter.
135+
Start this new parameter with
136+
<tt>query('id')</tt> to select the
137+
<tt>id</tt> parameter for validation (we've filled in this part
138+
to help get you started).
139+
After <tt>query('id')</tt> (and before the terminating comma),
140+
add a period (<tt>.</tt>) and the validation requirement
141+
<tt>isInt()</tt> (<tt>isInt</tt> validates that the named parameter is
142+
an integer).
143+
The <tt>isInt</tt> method takes, as an optional parameter inside
144+
its parentheses,
145+
an object providing a minimum and maximum, e.g.,
146+
<tt>isInt({min: YOUR_MINIMUM, max: YOUR_MAXIMUM})</tt>.
147+
Set <tt>min</tt> and <tt>max</tt> to specify the allowed range.
148+
149+
<p>
150+
Note: JavaScript names are case-sensitive, so <tt>isint</tt> won't work.
151+
Remember to indicate the end of this parameter with a comma
152+
(our starter text does this).
153+
154+
<p>
155+
You can use the buttons below to ask for a hint, reset the
156+
input to its initial state, or give up (and show an answer) -
157+
but please try to do this on your own!
158+
159+
<p>
160+
// Based on https://helmetjs.github.io/
161+
// npm install helmet ; version 7.1.0
162+
163+
// Use require(), not import..from, so it works in more places.
164+
//
165+
// In helmet 7.1.0 the CSP defaults are:
166+
// Content-Security-Policy: default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests
167+
// 'unsafe-inline'
168+
//
169+
// Run with:
170+
// node csp1.js
171+
// Then view with:
172+
// curl --verbose 'http://localhost:3000'
173+
-->
174+
175+
<p>
176+
<h2>演習(<span id="grade"></span>)</h2>
177+
<p>
178+
<form id="lab">
179+
<pre><code
180+
>const express = require("express");
181+
<input id="attempt0" type="text" size="60" spellcheck="false" value="const">
182+
183+
const app = express();
184+
185+
// Helmetを使って、ハードニングヘッダを挿入する
186+
<textarea id="attempt1" rows="10" cols="60" spellcheck="false">
187+
app.use(
188+
);
189+
</textarea>
190+
191+
app.get("/", (req, res) => {
192+
res.send("Hello world!");
193+
});
194+
195+
app.listen(3000);
196+
</code></pre>
197+
<button type="button" class="hintButton">ヒント</button>
198+
<button type="button" class="resetButton">リセット</button>
199+
<button type="button" class="giveUpButton">諦める</button>
200+
<br><br>
201+
<p>
202+
<i>このラボは、<a href="https://www.linuxfoundation.org/">Linux Foundation</a>のDavid A. Wheelerによって開発されました。</i>
203+
<br><br>
204+
<p id="correctStamp" class="small">
205+
<textarea id="debugData" class="displayNone" rows="20" cols="65" readonly>
206+
</textarea>
207+
</form>
208+
</div><!-- End GitHub pages formatting -->
209+
</body>
210+
</html>

0 commit comments

Comments
 (0)