XSS prevention examples

XSS prevention tools

by David McClelland

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<div class="container">
  <label for="untrusted">Untrusted:</label>
  <input type="text" id="untrusted" name="name" required>

  <div class="URLEncoding">
    <div>
      <label for="escapedTextField">escaped:</label>
      <input type="text" id="escapedTextField" readonly/>
    </div>

    <div>
      <label for="encodedURITextField">EncodedURI:</label>
      <input type="text" id="encodedURITextField" readonly />
    </div>

    <div>
      <label for="encodedURIComponentTextField">EncodedURIComponent:</label>
      <input type="text" id="encodedURIComponentTextField" readonly />
    </div>
  </div>
  <div class="HTMLEncoding">
    <div>
      <label for="lodashEscapedTextField">lodash _.escape([string='']):</label>
      <input type="text" id="lodashEscapedTextField" readonly />
    </div>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.container div {
  width: 100%;
}

.container input {
  width: 100%;
}

JavaScript

// untrusted text
// reserved URL characters: !	*	'	(	)	;	:	@	&	=	+	$	,	/	?	#	[	]

// sanitized

// encoded = escaped
var untrustedTextField = document.getElementById('untrusted');
untrustedTextField.value = "!*'();:@&=+$,/?#[] ";
transformText(untrustedTextField.value);

untrustedTextField.oninput = function() {
  transformText(this.value);
};

function transformText(untrustedText) {
  escapedText = escape(untrustedText);
  escapedTextField.value = escapedText;

  encodedURIText = encodeURI(untrustedText);
  encodedURITextField.value = encodedURIText;

  encodedURIComponentText = encodeURIComponent(untrustedText);
  encodedURIComponentTextField.value = encodedURIComponentText;

  lodashEscapedText = _.escape(untrustedText);
  lodashEscapedTextField.value = lodashEscapedText;
}