CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches

From Expertiza_Wiki
Jump to navigation Jump to search

“M1803: Implement a web page fuzzer to find rendering mismatches”

This helps to generate multiple skeleton HTML files with a doctype, head element, and body element. They have random content contained in itself.


Introduction

This section briefly describes the main parts of this project: Servo.

Servo

Named after a robot from the show Mystery Science Threater 3000, Servo is an experimental web browser layout engine developed by Mozilla. It is created by Mozilla Research, the Servo project is being built by a global community, from individual contributors to companies such as Mozilla and Samsung. It currently supports Linux, macOS, Windows, and Android.

Project Description

Servo is implementing a rendering engine for web content from scratch. We often rely on existing web browsers like Firefox and Chrome to help us determine if Servo is rendering web content correctly. This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the WebDriver protocol and report if both engines render the content identically.

Initial Steps

  • adding a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
  • adding a module to the program that enables generating random content specific to the <body> element (such as a

    block that contains randomly generated text) and add it to the generated output

  • generating random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like color to it)

Subsequent Steps

  • extending the program that controls Servo to also control Firefox using geckodriver
  • compare the resulting screenshots and report the contents of the generated page if the screenshots differ
  • extend the page generation tool with a bunch of additional strategies, such as
    • generating elements trees of arbitrary depth
    • generating sibling elements
    • extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
    • extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
    • randomly choose whether to generate a document in quirks mode or not

Implementation

After setting up the environment required to develop for Servo, we built and compiled Servo as per the instructions on Servo’s Github repo. We used Mozilla’s mach tools to build Servo with Cargo, which is the rust package manager. 

git clone https://github.com/servo/servo
cd servo
./mach build --dev


After successfully building servo, python script was created for generating random html files. The script can be downloaded from [1] and the following commands can used for running the script. 

cd Random-web-content-generator---CSC-517-OSS-Project
python code_generation.py

Testing

As this is a Mozilla Project, it does not require to test the coverage. For more details following screen cast link would be helpful.

Conclusion

The goal for the project was to make it easy to find testcases that are rendered differently by Firefox and Servo.

References

  1. https://en.wikipedia.org/wiki/Servo_(layout_engine)
  2. https://www.rust-lang.org/en-US/
  3. https://github.com/servo/servo
  4. https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project
  5. https://github.com/servo/servo/pull/20448
Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2018-_Project_M1803:_Implement_a_web_page_fuzzer_to_find_rendering_mismatches&oldid=116317"