bypass sanitization for markdown

lib/components/ApiInfo/api-info.html

@@ -1,6 +1,6 @@
 <div>
   <h1 class="api-info-header">{{data.title}} ({{data.version}})</h1>
-  <p *ngIf="data.description" innerHtml="{{data.description | marked}}"> </p>
+  <p *ngIf="data.description" [innerHtml]="data.description | marked"> </p>
   <p>
     <!-- TODO: create separate components for contact and license ? -->
     <span *ngIf="data.contact"> Contact:

lib/components/JsonSchema/json-schema-lazy.ts

@@ -32,6 +32,7 @@ export class JsonSchemaLazy implements OnDestroy, AfterViewInit {
   }
 
   _loadAfterSelf() {
+    // FIXME: get rid of DynamicComponentLoader as it is deprecated
     return this.dcl.loadNextToLocation(JsonSchema, this.viewRef).then((compRef) => {
       this.initComponent(compRef);
       if (compRef.changeDetectorRef) {

lib/components/Method/method.html

@@ -7,7 +7,7 @@
             <a *ngFor="let tag of data.methodInfo.tags" attr.href="#{{tag}}"> {{tag}} </a>
         </div>
         <p *ngIf="data.methodInfo.description" class="method-description"
-        innerHtml="{{data.methodInfo.description | marked}}">
+        [innerHtml]="data.methodInfo.description | marked">
     </p>
     <params-list pointer="{{pointer}}/parameters"> </params-list>
     <responses-list pointer="{{pointer}}/responses"> </responses-list>

lib/components/MethodsList/methods-list.html

@@ -2,7 +2,7 @@
   <div class="tag" *ngFor="let tag of data.tags">
     <div class="tag-info" [attr.tag]="tag.name">
       <h1 class="sharable-header"> <a class="share-link" href="#tag/{{tag.name | encodeURIComponent}}"></a>{{tag.name}} </h1>
-      <p *ngIf="tag.description" innerHtml="{{ tag.description | marked }}"> </p>
+      <p *ngIf="tag.description" [innerHtml]="tag.description | marked"> </p>
     </div>
     <method *ngFor="let method of tag.methods" [pointer]="method.pointer" [attr.pointer]="method.pointer"
     [attr.tag]="method.tag" [tag]="method.tag" [attr.operation-id]="method.operationId"></method>

lib/components/ParamsList/params-list.html

@@ -20,7 +20,7 @@
               <span *ngFor="let enumItem of param.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
             </div>
           </div>
-          <div class="param-description" innerHtml="{{param.description | marked}}"></div>
+          <div class="param-description" [innerHtml]="param.description | marked"></div>
         </div>
     </div>
   </div>
@@ -29,7 +29,7 @@
 <div *ngIf="data.bodyParam">
   <h5 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h5>
 
-  <div class="body-param-description" innerHtml="{{data.bodyParam.description | marked}}"></div>
+  <div class="body-param-description" [innerHtml]="data.bodyParam.description | marked"></div>
   <div>
     <br>
     <json-schema-lazy [isRequestSchema]="true" [auto]="true" pointer="{{data.bodyParam.pointer}}/schema">

lib/components/Redoc/redoc.scss

@@ -160,7 +160,8 @@ footer {
     pre {
         font-family: Courier, monospace;
         white-space: pre-wrap;
-        background-color: rgba(38,50,56,0.04);
+        background-color: #263238;
+        color: white;
         padding: 12px 14px 15px 14px;
         overflow-x: auto;
         line-height: normal;

lib/components/RequestSamples/request-samples.html

@@ -5,6 +5,6 @@
     <schema-sample [pointer]="data.schemaPointer" [skipReadOnly]="true"> </schema-sample>
   </tab>
   <tab *ngFor="let sample of data.samples" [tabTitle]="sample.lang">
-    <pre innerHtml="{{sample.source | prism:sample.lang}}"></pre>
+    <pre [innerHtml]="sample.source | prism:sample.lang"></pre>
   </tab>
 </tabs>

lib/components/ResponsesList/responses-list.html

@@ -9,7 +9,7 @@
       <div class="header-name"> {{header.name}} </div>
       <div class="header-type"> {{header.type}} </div>
       <div *ngIf="header.default" class="header-default"> Default: {{header.default}} </div>
-      <div class="header-description" innerHtml="{{header.description | marked}}"> </div>
+      <div class="header-description" [innerHtml]="header.description | marked"> </div>
     </div>
   </div>
   <header *ngIf="response.headers">

lib/components/SchemaSample/schema-sample.html

@@ -1,5 +1,5 @@
 <div class="snippet">
   <!-- in case sample is not available for some reason -->
   <pre *ngIf="data.sample == undefined"> Sample unavailable </pre>
-  <pre innerHtml="{{data.sample | jsonFormatter}}"></pre>
+  <pre [innerHtml]="data.sample | jsonFormatter"></pre>
 </div>

lib/utils/JsonFormatterPipe.ts

@@ -1,15 +1,17 @@
 'use strict';
 import { Pipe, PipeTransform } from '@angular/core';
 import { isBlank } from '@angular/core/src/facade/lang';
+import { DomSanitizationService } from '@angular/platform-browser';
 
 var level = 1;
 const COLLAPSE_LEVEL = 2;
 
 @Pipe({ name: 'jsonFormatter' })
 export class JsonFormatter implements PipeTransform {
+  constructor(private sanitizer: DomSanitizationService) {}
   transform(value) {
     if (isBlank(value)) return value;
-    return jsonToHTML(value);
+    return this.sanitizer.bypassSecurityTrustHtml(jsonToHTML(value));
   }
 }