Merge pull request #508 from weseek/imprv/add-option-preventXSS-morita

Imprv/add option prevent xss morita

lib/locales/en-US/translation.json

@@ -327,6 +327,8 @@
     "change_redirect_url": "Enter <code>https://${crowi.host}/google/callback</code> <br>(where <code>${crowi.host}</code> is your host name) for \"Authorized redirect URIs\".",
     "clientID": "Client ID",
     "client_secret": "Client Secret",
+    "xss_prevent_setting":"Prevent XSS(Cross Site Scripting)",
+    "xss_prevent_setting_link":"Go to Markdown settings",
     "guest_mode": {
       "deny": "Deny Unregistered Users",
       "readonly": "View Only"
@@ -402,7 +404,17 @@
     "Enable Line Break": "Enable Line Break",
     "Enable Line Break desc": "Treat line break in the text page as <code>&lt;br&gt;</code> in HTML",
     "Enable Line Break for comment": "Enable Line Break in comment",
-    "Enable Line Break for comment desc": "Treat line break in comment as <code>&lt;br&gt;</code> in HTML"
+    "Enable Line Break for comment desc": "Treat line break in comment as <code>&lt;br&gt;</code> in HTML",
+    "XSS_setting": "Prevent XSS(Cross Site Scripting) Setting",
+    "XSS_setting_desc": "You can change the handling of HTML tags in markdown text.",
+    "Prevent XSS(Cross Site Scripting)": "Suppress HTML tag rendering",
+    "Prevent XSS(Cross Site Scripting)desc": "(TBD) 以下のオプション設定により、<code>&lt;iframe&gt;</code>等の一部のタグの描画を有効化します",
+    "Ignore all tags": "Ignore all tags",
+    "Recommended setting": "Recommended setting",
+    "Custom Whitelist": "Custom Whitelist",
+    "Tag names":"Tag names",
+    "Tag attributes":"Tag attributes",
+    "Add white list desc":"(TBD) ホワイトリストに追加したい要素をカンマ&lt;,&gt;で区切って追加してください"
   },
 
   "customize_page": {

lib/locales/ja/translation.json

@@ -344,6 +344,8 @@
     "change_redirect_url": "承認済みのリダイレクトURLに、 <code>https://${crowi.host}/google/callback</code> を入力<br>(<code>${crowi.host}</code>は環境に合わせて変更してください)",
     "clientID": "クライアントID",
     "client_secret": "クライアントシークレット",
+    "xss_prevent_setting":"XSS(Cross Site Scripting)対策設定",
+    "xss_prevent_setting_link":"マークダウン設定ページに移動",
     "guest_mode": {
       "deny": "アカウントを持たないユーザーはアクセス不可",
       "readonly": "閲覧のみ許可"
@@ -419,15 +421,16 @@
     "Enable Line Break desc": "ページテキスト中の改行を、HTML内で<code>&lt;br&gt;</code>として扱います",
     "Enable Line Break for comment": "コメント欄で Line Break を有効にする",
     "Enable Line Break for comment desc": "コメント中の改行を、HTML内で<code>&lt;br&gt;</code>として扱います",
-    "XSS_setting": "XSS防止設定",
-    "XSS_setting_desc": "マークダウンテキスト内のHTMLタグへの対処を変更できます。",
-    "TBD": "(TBD: コメント欄の Markdown 化は未だ実装されていません)",
-    "Prevent XSS(Cross Site Scripting)": "マークダウンテキスト内のHTMLタグを有効にする",
-    "Prevent XSS(Cross Site Scripting)desc": "悪意のあるプログラムからの攻撃を防ぎます",
-    "Prevent XSS(Cross Site Scripting)desc2": "無効にすることで、<code>&lt;iframe&gt;</code>等の一部ソースの表示を可能にします",
-    "Strip ignore tag": "ホワイトリストに入っていないタグを出力しない",
-    "White list tag names": "タグのホワイトリスト",
-    "White list tag attributes": "タグ属性のホワイトリスト"
+    "XSS_setting": "XSS(Cross Site Scripting)対策設定",
+    "XSS_setting_desc": "マークダウンテキスト内の HTML タグの扱いを設定し、悪意のあるプログラムからの攻撃を防ぎます",
+    "Prevent XSS(Cross Site Scripting)": "HTML タグの描画を抑制する",
+    "Prevent XSS(Cross Site Scripting)desc": "以下のオプション設定により、<code>&lt;iframe&gt;</code>等の一部のタグの描画を有効化します",
+    "Ignore all tags": "すべてのタグを抑制する",
+    "Recommended setting": "おすすめ設定",
+    "Custom Whitelist": "カスタムホワイトリスト",
+    "Tag names":"タグ名のリスト",
+    "Tag attributes":"タグ属性のリスト",
+    "Add white list desc":"ホワイトリストに追加したい要素をカンマ&lt;,&gt;で区切って追加してください"
   },
 
   "customize_page": {

lib/views/admin/markdown.html

@@ -80,71 +80,148 @@
           </div>
         </div>
 
-        <div class="form-group">
+        <div class="form-group my-3">
           <div class="col-xs-offset-4 col-xs-5">
             <input type="hidden" name="_csrf" value="{{ csrf() }}">
             <button type="submit" class="btn btn-primary">{{ t("Update") }}</button>
           </div>
         </div>
-
       </fieldset>
       </form>
 
       <form action="/admin/markdown/xss-setting" method="post" class="form-horizontal" id="markdownSettingForm" role="form">
-      <fieldset>
-        <legend>{{ t('markdown_setting.XSS_setting') }}</legend>
-        <p class="well">{{ t("markdown_setting.XSS_setting_desc") }}</p>
-        <div class="form-group">
-          <label for="markdownSetting[markdown:isPreventXSS]" class="col-xs-4 control-label">
+        <fieldset>
+
+          {% set nameForIsXssEnabled = "settingForm[security:xss-prevent:isEnabled]" %}
+
+          <legend>{{ t('markdown_setting.XSS_setting') }}</legend>
+          <p class="well">{{ t("markdown_setting.XSS_setting_desc") }}</p>
+
+          <label for="markdownSetting[markdown:isPreventXss]" class="col-xs-4 control-label">
             {{ t('markdown_setting.Prevent XSS(Cross Site Scripting)') }}
           </label>
+
           <div class="col-xs-5">
-            <div class="btn-group btn-toggle" data-toggle="buttons">
-              <label class="btn btn-default btn-rounded btn-outline {% if markdownSetting['markdown:xss:isPrevented'] %}active{% endif %}" data-active-class="primary">
-                <input name="markdownSetting[markdown:xss:isPrevented]" value="true" type="radio"
-                    {% if true === markdownSetting['markdown:xss:isPrevented'] %}checked{% endif %}> ON
-              </label>
-              <label class="btn btn-default btn-rounded btn-outline {% if !markdownSetting['markdown:xss:isPrevented'] %}active{% endif %}" data-active-class="default">
-                <input name="markdownSetting[markdown:xss:isPrevented]" value="false" type="radio"
-                    {% if !markdownSetting['markdown:xss:isPrevented'] %}checked{% endif %}> OFF
-              </label>
+            <div class="form-group">
+              <div class="col-xs-6">
+                <div class="btn-group btn-toggle" data-toggle="buttons">
+                  <label class="btn btn-default btn-rounded btn-outline" data-active-class="primary">
+                    <input name="{{nameForIsXssEnabled}}" value="true" type="radio"
+                        {% if true === isXssEnabled %}checked{% endif %}> ON
+                  </label>
+                  <label class="btn btn-default btn-rounded btn-outline {% if !isGoogleEnabled %}active{% endif %}" data-active-class="default">
+                    <input name="{{nameForIsXssEnabled}}" value="false" type="radio"
+                        {% if !isXssEnabled %}checked{% endif %}> OFF
+                  </label>
+                </div>
+              </div>
             </div>
-            <p class="help-block">{{ t("markdown_setting.Prevent XSS(Cross Site Scripting)desc") }}<br>{{ t("markdown_setting.Prevent XSS(Cross Site Scripting)desc2") }}</p>
-          </div>
-        </div>
 
-        <div class="form-group">
-          <div id="selectXSS" class="input">
-            <input type="radio" name="markdownSetting[markdown:xss:option]" value="1">
-              {{ t('markdown_setting.Ignore all') }}<br>
-            <input type="radio" name="markdownSetting[markdown:xss:option]" value="2" checked>
-              {{ t('markdown_setting.Recommended setting') }}<br>
-            <input type="radio" name="markdownSetting[markdown:xss:option]" value="3">
-              {{ t('markdown_setting.Whitelist setting') }}<br>
-        </div>
-
-        <div class="form-group">
-          <div id="WLsetting" class="input">
-            <p class="help-block">{{ t('markdown_setting.Add white list desc') }}</p>
-           <div class="inputbox">
-             {{ t('markdown_setting.tag') }}
-             <input type="text" name="markdownSetting[markdown:xss:tagWhiteList]" size="70" value="" placeholder="span, iframe, input">
-           </div>
-           <div class="inputbox">
-             {{ t('markdown_setting.tag attribute') }}
-             <input type="text" name="markdownSetting[markdown:xss:attrWhiteList]" size="70" value="" placeholder="class, type, placeholder, name, required">
-           </div>
-         </div>
-        </div>
+            <fieldset id="xss-hide-when-disabled" {%if !isXssEnabled %}style="display: none;"{% endif %}>
+              {% set nameForIsXss2Enabled = "settingForm[security:xss2-prevent:isEnabled]" %}
+              <p class="help-block">{{ t("markdown_setting.Prevent XSS(Cross Site Scripting)desc") }}</p>
+
+              <div class="form-group">
+                <div class="col-xs-6">
+                  <div class="btn-group btn-toggle" data-toggle="buttons">
+                    <div>
+                      <label data-active-class="primary">
+                        <input name="{{nameForIsXss2Enabled}}" value="1" type="radio"
+                        {% if !isXssEnabled %}checked{% endif %}>
+                        {{ t('markdown_setting.Ignore all tags') }}
+                      </label>
+                    </div>
+                    <div>
+                      <label data-active-class="primary">
+                          <input name="{{nameForIsXss2Enabled}}" value="2" type="radio"
+                          {% if true === isXssEnabled %}checked{% endif %}>
+                        {{ t('markdown_setting.Recommended setting') }}<br>
+                      </label>
+                    </div>
+                    <div>
+                      <label data-active-class="primary">
+                        <input name="{{nameForIsXss2Enabled}}" value="3" type="radio"
+                        {% if true === isXssEnabled %}checked{% endif %}>
+                        {{ t('markdown_setting.Custom Whitelist') }}
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div id="xss2-hide-when-disabled" {%if !isXssEnabled %}style="display: none;" {% endif %}>
+                <div>
+                  {{ t('markdown_setting.Tag names') }}
+                  <div>
+                    <textarea type="text" name="tag" rows="5" cols="40" readonly>span, iframe, input</textarea>
+                  </div>
+                </div>
+                <div>
+                  {{ t('markdown_setting.Tag attributes') }}
+                  <div>
+                    <textarea name="tagattribute" rows="5" cols="40" readonly>class, type, placeholder, name, required</textarea>
+                  </div>
+                </div>
+              </div>
+
+              <div id="xss3-hide-when-disabled" {%if !isXssEnabled %}style="display: none;" {% endif %}>
+                <div>
+                  {{ t('markdown_setting.Tag names') }}
+                  <div>
+                    <textarea type="text" name="tag" rows="5" cols="40" value="" placeholder="span, iframe, input"></textarea>
+                    <input type="button" class="btn btn-default" value="おすすめ設定をインポート" />
+                  </div>
+                </div>
+                <div>
+                  {{ t('markdown_setting.Tag attributes') }}
+                  <div>
+                    <textarea name="tagattribute" rows="5" cols="40" value="" placeholder="class, type, placeholder, name, required"></textarea>
+                    <input type="button" class="btn btn-default" value="おすすめ設定をインポート" />
+                  </div>
+                </div>
+              </div>
+            </fieldset>
+          </div>
 
-        <div class="form-group">
-          <div class="col-xs-offset-4 col-xs-5">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="btn btn-primary">{{ t("Update") }}</button>
+          <script>
+            $('input[name="settingForm[security:xss-prevent:isEnabled]"]').change(function() {
+              const isEnabled = ($(this).val() === "true");
+
+              if (isEnabled) {
+                $('#xss-hide-when-disabled').show(400);
+              }
+              else {
+                $('#xss-hide-when-disabled').hide(400);
+              }
+            });
+
+            $('input[name="settingForm[security:xss2-prevent:isEnabled]"]').change(function() {
+              const isEnabled = ($(this).val() === "1");
+              const isEnabled2 = ($(this).val() === "2");
+
+              if (isEnabled) {
+                $('#xss2-hide-when-disabled').hide(400);
+                $('#xss3-hide-when-disabled').hide(400);
+              }
+              else if (isEnabled2) {
+                $('#xss2-hide-when-disabled').show(400);
+                $('#xss3-hide-when-disabled').hide(400);
+              }
+              else {
+                $('#xss3-hide-when-disabled').show(400);
+                $('#xss2-hide-when-disabled').hide(400);
+              }
+            });
+          </script>
+
+          <div class="form-group my-3">
+            <div class="col-xs-offset-4 col-xs-5">
+              <input type="hidden" name="_csrf" value="{{ csrf() }}">
+              <button type="submit" class="btn btn-primary">{{ t("Update") }}</button>
+            </div>
           </div>
-        </div>
 
-      </fieldset>
+        </fieldset>
       </form>
 
     </div>
@@ -155,3 +232,10 @@
 
 {% block content_footer %}
 {% endblock content_footer %}
+
+
+
+
+
+
+

lib/views/admin/security.html

@@ -100,7 +100,17 @@
         </fieldset>
       </form>
 
-      <form action="/_api/admin/security/mechanism" method="post" class="form-horizontal m-t-30" id="mechanismSetting" role="form">
+      <!-- prevent XSS link -->
+      <div class="mt-5">
+        <legend>{{ t('security_setting.xss_prevent_setting') }}</legend>
+        <div class="text-center">
+          <a class="flexbox" style="font-size: large;" href="/admin/markdown/#preventXSS">
+            <i class="fa-fw icon-login"></i> {{ t('security_setting.xss_prevent_setting_link') }}
+          </a>
+        </div>
+       </div>
+
+      <form action="/_api/admin/security/mechanism" method="post" class="form-horizontal mt-5" id="mechanismSetting" role="form">
         <fieldset>
           <legend class="alert-anchor">{{ t('Selecting authentication mechanism') }}</legend>
           <p class="alert alert-info"><b>{{ t("security_setting.note") }}: </b>{{ t("security_setting.require_server_restart_change_auth") }}</p>
@@ -274,7 +284,6 @@
         </div>
 
       </div><!-- /.auth-mechanism-configurations -->
-
     </div>
   </div>
 

resource/js/legacy/crowi-admin.js

@@ -106,3 +106,5 @@ $(function() {
   // style switcher
   $('#styleOptions').styleSwitcher();
 });
+
+

resource/styles/agile-admin/inverse/pages.scss

@@ -1429,11 +1429,6 @@ a.mytooltip {
 }
 
 
-.input{
-  margin: 1em;
-}
-
-
 /********* Megamenu Page**********/
 /*
 .megamenu {

resource/styles/scss/_admin.scss

@@ -1,4 +1,5 @@
 .admin-page {
+    //security XSS prevent
 
   .admin-user-menu {
     .dropdown-menu {
@@ -6,7 +7,7 @@
       right: 0;
       width: 300px;
     }
-  }
+   }
 
   .admin-group-menu {
     .dropdown-menu {
@@ -37,7 +38,7 @@
     }
 
     .auth-mechanism-configurations {
-      min-height: 800px;
+      min-height: 300px;
     }
   }