Giter Club home page Giter Club logo

sxwjs's Introduction

SXW.js

Website GitHub License GitHub issues Contributors

About

SXW.js is a javascript library that is used to display console warnings against Self XSS attacks.

Status: GitHub Workflow Status

Download via

npm Nuget GitHub release CDN

Usage

Using npm

  1. Install the npm package using
    npm i @sxwjs/sxwjs
  2. Import sxwjs module
  3. Call the required function inside sxwjs module
    import sxwjs from '@sxwjs/sxwjs';
    ...
    ...
    sxwjs.printWarning();

Using js file directly

  1. Include the sxw.js file in your website either directly or via CDN.
  2. If you are using CDN try the following URL
    <script src="https://cdn.jsdelivr.net/npm/@sxwjs/[email protected]/src/sxw.min.js"></script>
  3. The script will register built-in functions into window.sxwjs object.
  4. At the end of the HTML document call the printWarning function in window.sxwjs as shown in the sample code.
    <script>
        window.sxwjs.printWarning();
    </script>

Using nuget

  1. Install the nuget package
  2. Include the sxw.js file from the content folder into your website.
  3. At the end of the HTML document call the printWarning function in window.sxwjs similar to the one mentioned above.

Customizations

Sections

The warning displayed in console contains three sections.

  1. A huge STOP sign
  2. A caution text in bold
  3. A detailed message saying that this section is intented for developers only. It also warns aginst copy pasting content in the console.
Configuration

SXW.js has a config object with the following variables,

Variable name Default value Description
stopColor red the colour of the stop sign
stopFontWeight bold Font weight for stop sign
cautionFontWeight bold Font weight for caution sign
cautionFontSize 15px Font size for caution sign

Example js object:

var config = {
        stopColor: "red",
        stopFontWeight: "bold",
        cautionFontWeight: "bold",
        cautionFontSize: "15px",
    };
Content

SXW.js has a predefined object with the following variables for defining the content to be displayed,

Variable name Default value Description
stopText * based stop sign text The text used to print STOP sign
cautionText Caution: DO NOT PROCEED. Text for caution notice
warningText This section is intended for developers only. Don't copy paste anything in this area.\nIf someone told you to copy and paste something here, it is a scam and will give them access to your account. In that case, kindly report this to our support team. The content of the detailed error message
var content = {
        en: {
            stopText: "*********  *********  *********  *********\n***           ***     ***   ***  ***   ***\n***           ***     ***   ***  ***   ***\n*********     ***     ***   ***  *********\n      ***     ***     ***   ***  ***\n      ***     ***     ***   ***  ***\n*********     ***     *********  ***",
            cautionText: "Caution: DO NOT PROCEED.",
            warningText: "This section is intended for developers only. Don't copy paste anything in this area.\nIf someone told you to copy and paste something here, it is a scam and will give them access to your account. In that case, kindly report this to our support team."
        }
    };

You can define content in multiple languages as shown here. Just pass the appropriate language code to the printing function.

Functions

There are three functions in the library that will be available into the window.sxwjs object.

  1. printStop - Prints just the huge stop sign.
  2. printCautionNotice - Prints the caution notice.
  3. printWarningText - Prints the the detailed error message.
  4. printWarning - Prints all the three sections.
  5. setConfig - Assigns the provided configuration.
  6. getConfig - Retrives the configuration.
  7. setContent - Can be used to modifiy the content such as warningText, cautionNotice, etc...
  8. getContent - Retrives the content that will be displayed on the console.

None of these functions are called by default. You can choose to call them as you wish.

Example Usage:

window.sxwjs.setConfig(myConfig);
window.sxwjs.printWarning('en');
window.sxwjs.printStop('en');
window.sxwjs.printCautionNotice('en');

Credits & Thanks

Contributors

Kolappan Nathan
Kolappan Nathan

๐Ÿ’ป ๐Ÿšง
yuvaraj
yuvaraj

๐Ÿ’ป

This project follows the all-contributors specification. Contributions of any kind welcome!

Services & Tools used

  1. Github - Provides free hosting for repos and website.
  2. js.org - Provides subdomain for our website.
  3. Shields.io - Provides those beatutiful status icons.
  4. Azure Devops - Free CI/CD for open source projects.
  5. ImgBot - Automatic compression of new images
  6. Pull - Automatic update of forked repos
  7. allcontributors - Helps maintaing list of contributors of the project
  8. Adobe Spark - Used to create logo, banners, etc...

sxwjs's People

Contributors

allcontributors[bot] avatar imgbotapp avatar kolappannathan avatar shivarajnaidu avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Forkers

cu-chi-zz

sxwjs's Issues

Remove line breaks from warning text

This requires that users replacing the warning text also need to input new line breaks. This should not be the behaviour. move them to caution notice.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.