Try @eslint-react/kit@beta
logoESLint React

no-script-url

Disallows 'javascript:' URLs as attribute values.

Full Name in eslint-plugin-react-dom

react-dom/no-script-url

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom-no-script-url

Presets

dom recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

javascript: URLs are a form of XSS attack. They allow an attacker to execute arbitrary JavaScript in the context of your website, which can be used to steal user data, deface your website, or perform other malicious actions.

Examples

function MyComponent() {
  // Problem: `javascript:` URLs are a security risk and should be avoided
  return <a href="javascript:alert('Hello, world!')">Click me</a>;
  //        ^^^ Using a `javascript:` URL is a security risk and should be avoided.
}
function MyComponent() {
  // Recommended: Use a safe URL instead
  return <a href="/some-page">Click me</a>;
}

Using event handlers instead of javascript: URLs

If you need to run JavaScript when a user clicks a link, attach an event handler to a <button> or use a safe href with an onClick handler on an <a> element.

// Recommended: Use a button with an onClick handler for actions
function MyComponent() {
  function handleClick() {
    alert("Hello, world!");
  }

  return <button onClick={handleClick}>Click me</button>;
}
// Recommended: Use a safe href with an onClick handler for links
function MyComponent() {
  function handleClick(event: React.MouseEvent) {
    event.preventDefault();
    alert("Hello, world!");
  }

  return (
    <a href="/safe-fallback" onClick={handleClick}>
      Click me
    </a>
  );
}

Versions

Resources


See Also

On this page