hohn/codeql
1
0
Fork 0
mirror of https://github.com/github/codeql.git synced 2026-04-28 02:05:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve scaling behaviour, fix fonts and headings

Browse Source 
docs: better responsive behaviour

docs: improve c/c++ slides

docs: titles and fonts

docs: tidy up layout and css

docs: update layout to scale font-size by slide height

docs: tidy up templates and fix font headings
This commit is contained in:
james
2019-08-16 15:09:59 +01:00
parent a35241e4cd
commit 110b02a556
16 changed files with 392 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/language/ql-training-rst/_static-training/setup-slide.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

4
docs/language/ql-training-rst/_static-training/slides-semmle-2/end_slide.html
View File

@@ -1,7 +1,3 @@
<head>
</head>
<slide class="end-slide">
<article>
</article>

43
docs/language/ql-training-rst/_static-training/slides-semmle-2/layout.html
View File

@@ -32,15 +32,15 @@ URL: https://code.google.com/p/io-2012-slides
{%- macro script() %}
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '{{ url_root }}',
VERSION: '{{ release|e }}',
URL_ROOT: '../',
VERSION: '1.21',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '{{ '' if no_search_suffix else file_suffix }}',
HAS_SOURCE: {{ has_source|lower }}
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script data-main="{{ pathto('_static/js/slides', 1) }}"
<script data-main="{{ pathto('_static/js/slides', 1) }}"
src="{{ pathto('_static/js/require-1.0.8.min.js', 1) }}"></script>
{%- for scriptfile in script_files %}
@@ -80,8 +80,8 @@ URL: https://code.google.com/p/io-2012-slides
{{ metatags }}
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- comment -->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--This one seems to work all the time, but really small on ipad-->
<!--<meta name="viewport" content="initial-scale=0.4">-->
<!-- end comment -->
@@ -128,11 +128,14 @@ URL: https://code.google.com/p/io-2012-slides
<link rel="prev" title="{{ prev.title|striptags|e }}" href="{{ prev.link|e }}" />
{%- endif %}
{%- endblock %}
{%- block extrahead %} {% endblock %}
{%- block extrahead %}
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Work+Sans&display=swap' rel='stylesheet'>
{% endblock %}
</head>
<body style="opacity: 0">
<slides class="layout-widescreen">
<div class="wrapper" id="wrapper">
<slides class="layout-widescreen" id="slides">
<!-- {% include "title_slide.html" %} -->
@@ -143,10 +146,30 @@ URL: https://code.google.com/p/io-2012-slides
<slide class="backdrop"></slide>
</slides>
</div>
<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>CFInstall.check({mode: 'overlay'});</script>
<![endif]-->
<script type="text/javascript">
//assigns font-size when document is ready
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
var wrapperHeight = document.getElementById('slides').clientHeight;
var relativeFontSize = wrapperHeight / 45 + 'px'; //change integer to set desired font size
document.getElementById("slides").style.fontSize = relativeFontSize;
}
};
//then on window resize
window.onresize = function(event) {
var wrapperHeight = document.getElementById('slides').clientHeight;
var relativeFontSize = wrapperHeight / 45 + 'px'; //change integer to set for desired font size
document.getElementById("slides").style.fontSize = relativeFontSize;
};
</script>
</body>
</html>

9
docs/language/ql-training-rst/_static-training/slides-semmle-2/slide.html
View File

@@ -1,15 +1,14 @@
<head>
</head>
<slide class="{% if slide_number==1 %}title-slide segue nobackground {% endif %} {% if slide_classes %}{{ ' '.join(slide_classes) }} {% endif %}level-{{ level }}"{% if id %} id="{{ id }}"{% endif %}>
<hgroup>
<h{{ level }}>{{ title }}</h{{ level }}>
</hgroup>
<article class="{{ content_classes|join(' ') }}">
{{ content }}
{% if config.slide_numbers %}
<div class="slide-no">{{ slide_number }}</div>
{% endif %}

288
docs/language/ql-training-rst/_static-training/slides-semmle-2/static/theme/css/default.css
View File

@@ -17,7 +17,6 @@ time, mark, audio, video {
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
@@ -27,9 +26,9 @@ html {
}
/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
/*ol, ul {
list-style: none;
}
}*/
/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
@@ -45,8 +44,10 @@ caption, th, td {
}
/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
q {
quotes: none;
margin-left: 2%;
margin-right:2%;
}
/* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
@@ -95,6 +96,7 @@ body {
-webkit-transition: opacity 800ms ease-in;
-webkit-transition-delay: 100ms;
transition: opacity 800ms ease-in 100ms;
/*font-size: 2.2vmin;*/
}
/* line 73, ../scss/_base.scss */
body.loaded {
@@ -113,11 +115,23 @@ slides > slide[hidden] {
/* line 86, ../scss/_base.scss */
slides {
width: 100%;
height: 100%;
width: 100vw;
height: 56.25vw;
max-height: 100vh;
max-width: 177.78vh;
/*width: 1200px;
height: 675px;
left: 50%;
top: 50%;*/
bottom: auto;
right: auto;
transform: translate(-50%, -50%);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
@@ -133,6 +147,7 @@ slides {
-webkit-transition: opacity 800ms ease-in;
-webkit-transition-delay: 100ms;
transition: opacity 800ms ease-in 100ms;
font-size: 14px;
}
/* line 98, ../scss/_base.scss */
@@ -240,15 +255,12 @@ slides > slide {
font-family: 'Lato', sans-serif;
font-size: 2em;
color: #797979;
padding: 40px 60px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 5%;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
overflow: auto;
/*-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;*/
/*overflow: auto;*/
}
/* line 83, ../scss/default.scss */
slides > slide.far-past {
@@ -306,7 +318,7 @@ slides > slide:not(.nobackground):before {
}
/* line 147, ../scss/default.scss */
slides > slide:not(.nobackground):after {
font-size: 1em;
font-size: 0.5em;
content: attr(data-slide-num) "/" attr(data-total-slides);
position: fixed;
bottom: 20px;
@@ -338,16 +350,16 @@ slides > slide.backdrop:after, slides > slide.backdrop:before {
display: none;
}
/* line 180, ../scss/default.scss */
slides > slide > hgroup + article {
/*slides > slide > hgroup + article {
margin-top: 45px;
}
}*/
/* line 184, ../scss/default.scss */
slides > slide > hgroup + article.flexbox.vcenter, slides > slide > hgroup + article.flexbox.vleft, slides > slide > hgroup + article.flexbox.vright {
height: 80%;
}
/* line 189, ../scss/default.scss */
slides > slide > hgroup + article p {
margin-bottom: 1em;
margin-bottom: 0.5em;
line-height: initial;
}
/* line 194, ../scss/default.scss */
@@ -368,7 +380,7 @@ slides.layout-faux-widescreen > slide {
slides.layout-widescreen > slide,
slides.layout-faux-widescreen > slide {
width: 100%;
overflow: auto;
/*overflow: auto;*/
}
/* line 217, ../scss/default.scss */
slides.layout-widescreen > slide.far-past,
@@ -450,16 +462,17 @@ h1, h2, h3 {
color: #5c31ff;
}
h1 {
font-size: 3em;
h1, h2 {
font-size: 1.5em;
font-family: 'Work Sans', sans-serif;
}
/* line 280, ../scss/default.scss */
h2 {
/*h2 {
font-size: 2em;
line-height: 45px;
letter-spacing: -2px;
color: #515151;
}
}*/
/* line 287, ../scss/default.scss */
h3 {
@@ -472,15 +485,15 @@ h3 {
/* line 295, ../scss/default.scss */
ul {
margin-left: 1.2em;
margin-left: 2.2em;
margin-bottom: 1em;
position: relative;
}
/* line 300, ../scss/default.scss */
ul li {
margin-bottom: 0.5em;
color: #2c2a8a;
line-height: 1.3em;
color: black;
line-height: 1.4em;
}
/* line 303, ../scss/default.scss */
ul li ul {
@@ -488,22 +501,22 @@ ul li ul {
margin-bottom: 0;
}
/* line 307, ../scss/default.scss */
ul li ul li:before {
/*ul li ul li:before {
content: '-';
font-weight: 600;
}
}*/
/* line 314, ../scss/default.scss */
ul > li:before {
/*ul > li:before {
content: '\00B7';
margin-left: -0.5em;
position: absolute;
font-weight: 600;
font-size: 2em;
}
}*/
/* line 321, ../scss/default.scss */
ul ul {
/*ul ul {
margin-top: .5em;
}
}*/
/* line 328, ../scss/default.scss */
.highlight-code slide.current pre > * {
@@ -521,11 +534,11 @@ ul ul {
/* line 337, ../scss/default.scss */
pre {
font-family: 'consolas', 'Courier New', monospace;
font-size: 1em;
font-size: 0.8em;
line-height: 1.2em;
padding: 10px 10px 10px 10px;
margin-bottom: 20px;
background-color: #e6e6e6;
/*padding: 0.8em;*/
margin-bottom: 0.5em;
/*background-color: #e6e6e6;*/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -534,7 +547,7 @@ pre {
/* line 351, ../scss/default.scss */
pre[data-lang]:after {
content: attr(data-lang);
background-color: #a9a9a9;
/*background-color: #a9a9a9;*/
right: 0;
top: 0;
position: absolute;
@@ -552,7 +565,7 @@ pre[data-lang="go"] {
/* line 368, ../scss/default.scss */
code {
font-size: 95%;
font-family: 'Source Code Pro', 'Courier New', monospace;
font-family: 'Consolas', 'Courier New', monospace;
color: black;
}
@@ -1189,7 +1202,7 @@ article.smaller q:before, article.smaller q:after {
/* line 809, ../scss/default.scss */
.segue {
padding: 60px 120px;
padding: 5%;
}
/* line 812, ../scss/default.scss */
.segue h2 {
@@ -1291,16 +1304,20 @@ aside.gdbar img {
/* line 888, ../scss/default.scss */
.title-slide hgroup {
margin-top: 200px;
margin-top: 20%;
}
/* line 891, ../scss/default.scss */
.title-slide hgroup h1 {
font-size: 3em;
font-size: 2em;
line-height: 1.4;
letter-spacing: -3px;
/*letter-spacing: -3px;*/
color: white;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 10%;
height: 0;
}
/* line 898, ../scss/default.scss */
.title-slide hgroup h2 {
@@ -1320,7 +1337,8 @@ aside.gdbar img {
.quote {
color: black;
font-style: italic;
font-size: 1.2em;
font-size: 1em;
padding: 0.5em;
}
/* line 916, ../scss/default.scss */
.quote .author {
@@ -1404,6 +1422,7 @@ slide {
width: 100%;
height: 100%;
overflow: auto;
transform: scale(1);
}
.end-slide {
@@ -1417,34 +1436,74 @@ slide {
background-size: cover;
}
.setup, .agenda {
background-image: url("../../setup-slide.svg");
background-size: cover;
}
/* Custom slide styles */
.setup article, .agenda article {
margin-top: 3%;
border-left: 1px solid #5c31ff;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 50%;
height: fit-content;
padding: 2%;
}
.setup li {
line-height: 1.5em;
margin-top: 1.5em;
}
.agenda li {
margin:0;
}
.setup ul, .agenda ul {
padding: 0;
}
.setup hgroup, .agenda hgroup {
position: relative;
margin: 7% 0 0 17%;
}
/*custom slide styles */
.semmle-logo sup {
vertical-align: super;
font-size: 0.4em;
font-size: 0.3em;
font-weight: 100;
}
.title-slide .semmle-logo {
color: white;
font-size: 1.2em;
position: absolute;
top: 125px;
top: 10%;
}
.title-slide p {
color: white;
font-size: 1.2em;
font-size: 1em;
position: absolute;
bottom: 30%;
}
.agenda-slide h1 {
padding:0;
}
.background2 h1, .background2 p {
.background2 h2 {
color: white;
}
.background2 p {
color: #5c31ff;
font-size: 1.5em;
}
hgroup .pre {
color: #5c31ff;
}
@@ -1467,10 +1526,10 @@ hgroup .pre {
padding: 0px;
width: 45%;
line-height: 1.2em;
color: black;
}
.column-right img, .column-left img {
max-height: 60vh;
display: block;
margin-left: auto;
margin-right: auto;
@@ -1482,17 +1541,12 @@ hgroup .pre {
.highlight {
width: auto;
}
.set-up {
margin-left: 240px;
margin-top: 150px;
color: #2c2a8a;
font-size: xx-large;
background: transparent !important;
margin-bottom: 2%;
}
p {
color: #2c2a8a;
color: black;
font-size: 1em;
}
@@ -1504,7 +1558,7 @@ p.first.admonition-title {
.admonition.note {
text-align: left;
font-size: initial;
font-size: 0.8em;
width: 100%;
overflow: scroll;
border: 1px solid black;
@@ -1513,7 +1567,6 @@ p.first.admonition-title {
.admonition.note pre {
font-family: 'consolas', 'Courier New', monospace;
background-color: white;
font-size: initial;
padding: 0;
margin-bottom: 10px;
}
@@ -1531,6 +1584,20 @@ p.first.admonition-title {
width: inherit;
}
/* more custom styles */
span.n, span.p {
color: grey;
}
ol {
color: black;
}
li > ul > li {
margin-bottom: 0;
}
/* scale and centre images*/
.image-box {
@@ -1539,11 +1606,13 @@ p.first.admonition-title {
}
img {
max-width: 100%;
max-height: 100vh;
max-width: 50%;
margin: auto;
}
article {
margin-top: 3%;
}
@media print {
/* line 978, ../scss/default.scss */
@@ -1562,13 +1631,15 @@ img {
transform: none !important;
width: 100%;
height: 100%;
page-break-after: always;
page-break-after: always !important;
top: auto !important;
left: auto !important;
bottom: unset;
margin-top: 0 !important;
margin-left: 0 !important;
opacity: 1 !important;
color: #555;
font-size: 100%;
}
/* line 993, ../scss/default.scss */
slides slide.far-past, slides slide.past, slides slide.next, slides slide.far-next, slides slide.far-past, slides slide.current {
@@ -1641,68 +1712,63 @@ img {
slides > slide:not(.nobackground):after {
display: none;
}
slides {
bottom: unset;
}
}
@media screen and (max-width: 480px) {
html {
height: 100%;
overflow: auto;
position: fixed;
width: 100%;
font-size: 45%;
/*
@media screen and (max-width: 450px) {
slides {
font-size: 1.2vmin;
}
}
body {
margin: 0;
padding: 0;
@media screen and (min-width: 451px) and (max-width: 767px) {
slides {
font-size: 2.5vmin;
}
}
.column-left, .column-right {
width: 100%;
height: auto;
@media screen and (min-width: 451px) and (orientation : portrait) {
slides {
font-size: 1.2vmin;
}
}
article {
top: 20%;
left: 10%;
right: 10%;
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
slides {
font-size: 1.2vmin;
}
}
@media screen and (min-width: 768px) and (max-width: 812px) and (orientation: landscape) {
slides {
font-size: 2.2vmin;
}
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
html {
height: 100%;
overflow: auto;
position: fixed;
width: 100%;
font-size: 70%;
@media screen and (min-width: 813px) and (max-width: 1024px) and (orientation: landscape) {
slides {
font-size: 1.8vmin;
}
body {
margin: 0;
padding: 0;
}
.column-left, .column-right {
width: 100%;
height: auto;
}
}
@media screen and (min-width: 1025px) and (max-width: 1800px) {
html {
height: 100%;
overflow: auto;
position: fixed;
width: 100%;
font-size: 80%;
@media screen and (min-width: 1025px) and (orientation: landscape){
slides {
font-size: 2vmin;
}
}
body {
margin: 0;
padding: 0;
@media screen and (min-width: 1025px) and (orientation: portrait){
slides {
font-size: 1.2vmin;
}
}
*/
.wrapper {
height: 675px;
resize: both;
}

94
docs/language/ql-training-rst/cpp/bad-overflow-guard.rst
View File

@@ -1,3 +1,4 @@
===========================
Example: Bad overflow guard
===========================
@@ -5,21 +6,22 @@ Example: Bad overflow guard
Semmle :sup:`TM`
.. Include information slides here
.. rst-class:: setup
.. include:: ../slide-snippets/info.rst
Setup
=====
QL snapshot
===========
For this example you should download:
For the examples in this presentation, we will be analyzing `ChakraCore <https://github.com/microsoft/ChakraCore>`__.
We recommend you download `this historic snapshot <https://downloads.lgtm.com/snapshots/cpp/microsoft/chakracore/ChakraCore-revision-2017-April-12--18-13-26.zip>`__ to analyze in QL for Eclipse.
Alternatively, you can query the project in `the query console <https://lgtm.com/query/project:2034240708/lang:cpp/>`__ on LGTM.com.
- `QL for Eclipse <https://help.semmle.com/ql-for-eclipse/Content/WebHelp/install-plugin-free.html>`__
- `ChakraCore snapshot <https://downloads.lgtm.com/snapshots/cpp/microsoft/chakracore/ChakraCore-revision-2017-April-12--18-13-26.zip>`__
.. note::
For the examples in this presentation, we will be analyzing `ChakraCore <https://github.com/microsoft/ChakraCore>`__.
You can query the project in `the query console <https://lgtm.com/query/project:2034240708/lang:cpp/>`__ on LGTM.com.
Note that results generated in the query console are likely to differ to those generated in the QL plugin as LGTM.com analyzes the most recent revisions of each project that has been added–the snapshot available to download above is based on an historical version of the code base.
Checking for overflow in C
@@ -28,15 +30,15 @@ Checking for overflow in C
- Arithmetic operations overflow if the result is too large for their type.
- Developers sometimes exploit this to write overflow checks:
.. code-block:: cpp
.. code-block:: cpp
if (v + b < v) {
handle_error("overflow");
} else {
result = v + b;
}
Where might this go wrong?
if (v + b < v) {
handle_error("overflow");
} else {
result = v + b;
}
Where might this go wrong?
.. note::
@@ -54,12 +56,12 @@ From `https://en.cppreference.com/w/c/language/conversion <https://en.cppreferen
Integer promotion is the implicit conversion of a value of any integer type with rank less or equal to rank of ``int`` ... to the value of type ``int`` or ``unsigned int``.
The arguments of the following arithmetic operators undergo implicit conversions:
- The arguments of the following arithmetic operators undergo implicit conversions:
- binary arithmetic: ``* / % + -``
- relational operators: ``< > <= >= == !=``
- binary bitwise operators: ``& ^ |``
- the conditional operator: ``?:``
- binary arithmetic ``* / % + -``
- relational operators ``< > <= >= == !=``
- binary bitwise operators ``& ^ |``
- the conditional operator ``?:``
.. note::
@@ -72,17 +74,17 @@ Checking for overflow in C revisited
Which branch gets executed in this example? What is the value of ``result``?
.. code-block:: cpp
uint16_t v = 65535;
uint16_t b = 1;
uint16_t result;
if (v + b < v) {
handle_error("overflow");
} else {
result = v + b;
}
.. code-block:: cpp
uint16_t v = 65535;
uint16_t b = 1;
uint16_t result;
if (v + b < v) {
handle_error("overflow");
} else {
result = v + b;
}
.. note::
In this example the second branch is executed, even though there is a 16-bit overflow, and ``result`` is set to zero.
@@ -92,18 +94,18 @@ Checking for overflow in C revisited
Here is the example again, with the conversions made explicit:
.. code-block:: cpp
:emphasize-lines: 4,7
uint16_t v = 65535;
uint16_t b = 1;
uint16_t result;
if ((int)v + (int)b < (int)v) {
handle_error("overflow");
} else {
result = (uint16_t)((int)v + (int)b);
}
.. code-block:: cpp
:emphasize-lines: 4,7
uint16_t v = 65535;
uint16_t b = 1;
uint16_t result;
if ((int)v + (int)b < (int)v) {
handle_error("overflow");
} else {
result = (uint16_t)((int)v + (int)b);
}
.. note::
In this example the second branch is executed, even though there is a 16-bit overflow, and result is set to zero.
@@ -176,7 +178,9 @@ QL query: bad overflow guards
=============================
We can ensure the operands being added have size less than 4 bytes, using our new predicate.
QL has logical quantifiers like ``exists`` and ``forall``, allowing us to declare variables and enforce a certain condition on them.
Now our query becomes:
.. rst-class:: build

38
docs/language/ql-training-rst/cpp/control-flow-cpp.rst
View File

@@ -1,3 +1,4 @@
================================
Analyzing control flow for C/C++
================================
@@ -7,21 +8,27 @@ Analyzing control flow for C/C++
.. Include information slides here
.. include:: ../slide-snippets/info.rst
.. rst-class:: setup
QL snapshot
===========
Setup
=====
For the examples in this presentation, we will be analyzing `ChakraCore <https://github.com/microsoft/ChakraCore>`__.
For this example you should download:
We recommend you download `this historic snapshot <https://downloads.lgtm.com/snapshots/cpp/microsoft/chakracore/ChakraCore-revision-2017-April-12--18-13-26.zip>`__ to analyze in QL for Eclipse.
Alternatively, you can query the project in `the query console <https://lgtm.com/query/project:2034240708/lang:cpp/>`__ on LGTM.com.
- `QL for Eclipse <https://help.semmle.com/ql-for-eclipse/Content/WebHelp/install-plugin-free.html>`__
- `ChakraCore snapshot <https://downloads.lgtm.com/snapshots/cpp/microsoft/chakracore/ChakraCore-revision-2017-April-12--18-13-26.zip>`__
.. note::
For the examples in this presentation, we will be analyzing `ChakraCore <https://github.com/microsoft/ChakraCore>`__.
You can query the project in `the query console <https://lgtm.com/query/project:2034240708/lang:cpp/>`__ on LGTM.com.
Note that results generated in the query console are likely to differ to those generated in the QL plugin as LGTM.com analyzes the most recent revisions of each project that has been added–the snapshot available to download above is based on an historical version of the code base.
.. rst-class:: agenda
Agenda
======
@@ -37,6 +44,7 @@ Control flow graphs
.. container:: column-left
We frequently want to ask questions about the possible *order of execution* for a program.
Example:
.. code-block:: cpp
@@ -81,12 +89,12 @@ Modeling control flow
The control flow is modeled with a QL class, ``ControlFlowNode``. Examples of control flow nodes include statements and expressions.
``ControlFlowNode`` provides API for traversing the control flow graph:
- ``ControlFlowNode`` provides API for traversing the control flow graph:
- ``ControlFlowNode ControlFlowNode.getASuccessor()``
- ``ControlFlowNode ControlFlowNode.getAPredecessor()``
- ``ControlFlowNode ControlFlowNode.getATrueSuccessor()``
- ``ControlFlowNode ControlFlowNode.getAFalseSuccessor()``
- ``ControlFlowNode ControlFlowNode.getASuccessor()``
- ``ControlFlowNode ControlFlowNode.getAPredecessor()``
- ``ControlFlowNode ControlFlowNode.getATrueSuccessor()``
- ``ControlFlowNode ControlFlowNode.getAFalseSuccessor()``
The control-flow graph is *intra-procedural*–in other words, only models paths within a function. To find the associated function, use
@@ -119,10 +127,10 @@ Based on this query, write a query that finds accesses to the variable that occu
- What do you find? What problems occur with this approach to detecting use-after-free vulnerabilities?
.. rst-class:: build
.. rst-class:: build
.. literalinclude:: ../query-examples/cpp/control-flow-cpp-2.ql
:language: ql
.. literalinclude:: ../query-examples/cpp/control-flow-cpp-2.ql
:language: ql
Utilizing recursion
===================

33
docs/language/ql-training-rst/cpp/data-flow-cpp.rst
View File

@@ -1,5 +1,6 @@
Introduction to data flow
=========================
===================================
Introduction to data flow for C/C++
===================================
.. container:: semmle-logo
@@ -7,25 +8,28 @@ Introduction to data flow
Finding string formatting vulnerabilities in C/C++
.. Include information slides here
.. rst-class:: setup
.. include:: ../slide-snippets/info.rst
Setup
=====
QL snapshot
===========
For this example you should download:
For the examples in this presentation, we will be analyzing `dotnet/coreclr <https://github.com/dotnet/coreclr>`__.
We recommend you download `this historic snapshot <http://downloads.lgtm.com/snapshots/cpp/dotnet/coreclr/dotnet_coreclr_fbe0c77.zip>`__ to analyze in QL for Eclipse.
Alternatively, you can query the project in `the query console <https://lgtm.com/query/projects:1505958977333/lang:cpp/>`__ on LGTM.com.
- `QL for Eclipse <https://help.semmle.com/ql-for-eclipse/Content/WebHelp/install-plugin-free.html>`__
- `dotnet/coreclr snapshot <http://downloads.lgtm.com/snapshots/cpp/dotnet/coreclr/dotnet_coreclr_fbe0c77.zip>`__
.. note::
For the examples in this presentation, we will be analyzing `dotnet/coreclr <https://github.com/dotnet/coreclr>`__.
You can query the project in `the query console <https://lgtm.com/query/projects:1505958977333/lang:cpp/>`__ on LGTM.com.
Note that results generated in the query console are likely to differ to those generated in the QL plugin as LGTM.com analyzes the most recent revisions of each project that has been added–the snapshot available to download above is based on an historical version of the code base.
Overview
========
.. rst-class:: agenda
Agenda
======
- Non-constant format string
- Data flow
@@ -152,8 +156,6 @@ Data flow graphs
.. container:: column-right
Data flow graph:
.. container:: image-box
.. graphviz::
@@ -326,6 +328,7 @@ Refinements (take home exercise)
================================
Audit the results and apply any refinements you deem necessary.
Suggestions:
- Replace ``DataFlow::localFlowStep`` with a custom predicate that includes steps through global variable definitions.

87
docs/language/ql-training-rst/cpp/global-data-flow-cpp.rst
View File

@@ -1,27 +1,30 @@
Introduction to global data flow
================================
========================================
Introduction to global data flow for C++
========================================
.. container:: semmle-logo
Semmle :sup:`TM`
.. Include information slides here
.. include:: ../slide-snippets/info.rst
QL snapshot
===========
.. rst-class:: setup
For the examples in this presentation, we will be analyzing `dotnet/coreclr <https://github.com/dotnet/coreclr>`__.
Setup
=====
We recommend you download `this historic snapshot <http://downloads.lgtm.com/snapshots/cpp/dotnet/coreclr/dotnet_coreclr_fbe0c77.zip>`__ to analyze in QL for Eclipse.
For this example you should download:
Alternatively, you can query the project in `the query console <https://lgtm.com/query/projects:1505958977333/lang:cpp/>`__ on LGTM.com.
- `QL for Eclipse <https://help.semmle.com/ql-for-eclipse/Content/WebHelp/install-plugin-free.html>`__
- `dotnet/coreclr snapshot <http://downloads.lgtm.com/snapshots/cpp/dotnet/coreclr/dotnet_coreclr_fbe0c77.zip>`__
.. note::
For the examples in this presentation, we will be analyzing `dotnet/coreclr <https://github.com/dotnet/coreclr>`__.
You can query the project in `the query console <https://lgtm.com/query/projects:1505958977333/lang:cpp/>`__ on LGTM.com.
Note that results generated in the query console are likely to differ to those generated in the QL plugin as LGTM.com analyzes the most recent revisions of each project that has been added–the snapshot available to download above is based on an historical version of the code base.
.. rst-class:: agenda
Agenda
======
@@ -139,7 +142,7 @@ Use the ``FormattingFunction`` class to fill in the definition of ``isSink``.
Defining sinks (answer)
=======================
Use the ``FormattingFunction`` class to fill in the definition of “isSink”
Use the ``FormattingFunction`` class, we can write the sink as:
.. code-block:: ql
@@ -197,7 +200,7 @@ Add an additional taint step that (heuristically) taints a local variable if it
exists (Call c, Expr arg, LocalVariable lv |
arg = c.getAnArgument() and
arg = pred.asExpr() and
arg.getFullyConverted().getUnderlyingType() instanceof PointerType and
arg.getFullyConverted().getUnderlyingType() instanceof PointerType and
arg = lv.getAnAccess() and
succ.asUninitialized() = lv
)
@@ -231,12 +234,12 @@ Data flow models
.. code-block:: ql
class MemcpyFunction extends TaintFunction {
MemcpyFunction() { this.hasName("memcpy") }
override predicate hasTaintFlow(FunctionInput i, FunctionOutput o)
i.isInParameter(2) and o.isOutParameterPointer(0)
}
}
class MemcpyFunction extends TaintFunction {
MemcpyFunction() { this.hasName("memcpy") }
override predicate hasTaintFlow(FunctionInput i, FunctionOutput o)
i.isInParameter(2) and o.isOutParameterPointer(0)
}
}
.. note::
@@ -300,33 +303,33 @@ Balancing calls and returns
- Instead, make sure that matching ``stepIn``/``stepOut`` pairs talk about the same call site:
.. code-block:: ql
predicate balancedPath(DataFlow::Node src, DataFlow::Node snk) {
src = snk or DataFlow::localFlowStep(src, snk) or
exists(DataFlow::Node m | balancedPath(src, m) | balancedPath(m, snk)) or
exists(Call c, DataFlow::Node parm, DataFlow::Node ret |
stepIn(c, src, parm) and
balancedPath(parm, ret) and
stepOut(c, ret, snk)
)
}
.. code-block:: ql
predicate balancedPath(DataFlow::Node src, DataFlow::Node snk) {
src = snk or DataFlow::localFlowStep(src, snk) or
exists(DataFlow::Node m | balancedPath(src, m) | balancedPath(m, snk)) or
exists(Call c, DataFlow::Node parm, DataFlow::Node ret |
stepIn(c, src, parm) and
balancedPath(parm, ret) and
stepOut(c, ret, snk)
)
}
Summary-based global data flow
==============================
- To avoid traversing the same paths many times, we compute function summaries that record if a function parameter flows into a return value:
- To avoid traversing the same paths many times, we compute *function summaries* that record if a function parameter flows into a return value:
.. code-block:: ql
predicate returnsParameter(Function f, int i) {
exists (Parameter p, ReturnStmt retStmt, Expr ret |
p = f.getParameter(i) and
retStmt.getEnclosingFunction() = f and
ret = retStmt.getExpr() and
balancedPath(DataFlow::parameterNode(p), DataFlow::exprNode(ret))
)
}
.. code-block:: ql
predicate returnsParameter(Function f, int i) {
exists (Parameter p, ReturnStmt retStmt, Expr ret |
p = f.getParameter(i) and
retStmt.getEnclosingFunction() = f and
ret = retStmt.getExpr() and
balancedPath(DataFlow::parameterNode(p), DataFlow::exprNode(ret))
)
}
- Use this predicate in balancedPath instead of ``stepIn``/``stepOut`` pairs.

22
docs/language/ql-training-rst/cpp/intro-ql-cpp.rst
View File

@@ -1,3 +1,4 @@
==========================================
Introduction to variant analysis for C/C++
==========================================
@@ -5,23 +6,22 @@ Introduction to variant analysis for C/C++
Semmle :sup:`TM`
.. Include information slides here
.. rst-class:: setup
.. include:: ../slide-snippets/info.rst
Setup
=====
.. Include details of project to analyze here
For this example you should download:
QL snapshot
===========
For the examples in this presentation, we will be analyzing `exiv2 <https://github.com/Exiv2/exiv2>`__.
We recommend you download `this historic snapshot <https://www.google.com/url?q=http://downloads.lgtm.com/snapshots/cpp/exiv2/Exiv2_exiv2_b090f4d.zip&sa=D&ust=1558103276046000& usg=AFQjCNFOJMgAMNChZHpMO9QEY62W-mYI1Q>`__ to analyze in QL for Eclipse.
Alternatively, you can query the project in `the query console <https://lgtm.com/query/project:1506532406873/lang:cpp/>`__ on LGTM.com.
- `QL for Eclipse <https://help.semmle.com/ql-for-eclipse/Content/WebHelp/install-plugin-free.html>`__
- `exiv2 snapshot <http://downloads.lgtm.com/snapshots/cpp/exiv2/Exiv2_exiv2_b090f4d.zip>`__
.. note::
For this example, we will be analyzing `exiv2 <https://github.com/Exiv2/exiv2>`__.
You can also query the project in `the query console <https://lgtm.com/query/project:1506532406873/lang:cpp/>`__ on LGTM.com.
Note that results generated in the query console are likely to differ to those generated in the QL plugin as LGTM.com analyzes the most recent revisions of each project that has been added–the snapshot available to download above is based on an historical version of the code base.
.. Include language-agnostic section here

7
docs/language/ql-training-rst/cpp/program-representation-cpp.rst
View File

@@ -1,7 +1,6 @@
QL for C/C++
============
Program representation
======================================
Program representation in QL for C/C++
======================================
.. container:: semmle-logo

20
docs/language/ql-training-rst/cpp/snprintf.rst
View File

@@ -1,3 +1,4 @@
===============================
Exercise: ``snprintf`` overflow
===============================
@@ -5,21 +6,22 @@ Exercise: ``snprintf`` overflow
Semmle :sup:`TM`
.. Include information slides here
.. rst-class:: setup
.. include:: ../slide-snippets/info.rst
Setup
=====
QL snapshot
===========
For this example you should download:
For this examples in this presentation, we will be analyzing `rsyslog <https://github.com/rsyslog/rsyslog>`__.
We recommend you download `this historic snapshot <https://downloads.lgtm.com/snapshots/cpp/rsyslog/rsyslog/rsyslog-all-revision-2018-April-27--14-12-31.zip>`__ to analyze in QL for Eclipse.
Alternatively, you can query the project in `the query console <https://lgtm.com/query/project:1506087977050/lang:cpp/>`__ on LGTM.com.
- `QL for Eclipse <https://help.semmle.com/ql-for-eclipse/Content/WebHelp/install-plugin-free.html>`__
- `rsyslog snapshot <https://downloads.lgtm.com/snapshots/cpp/rsyslog/rsyslog/rsyslog-all-revision-2018-April-27--14-12-31.zip>`__
.. note::
For this example, we will be analyzing `rsyslog <https://github.com/rsyslog/rsyslog>`__.
You can also query the project in `the query console <https://lgtm.com/query/project:1506087977050/lang:cpp/>`__ on LGTM.com.
Note that results generated in the query console are likely to differ to those generated in the QL plugin as LGTM.com analyzes the most recent revisions of each project that has been added–the snapshot available to download above is based on an historical version of the code base.
``snprintf``

108
docs/language/ql-training-rst/graph-tests.rst
View File

@@ -1,108 +0,0 @@
Column testing
==============
.. container:: column-left
- This is
- just to check
- setting up columns
.. code-block:: ql
import cpp
from
where
select
.. container:: column-right
- Item 1
- Item 2
- Item 3
.. image:: _static-training/curiosity2.png
:scale: 50 %
Graph testing
==============
.. container:: column-left
We frequently want to ask questions about the possible *order of execution* for a program.
Example:
.. code-block:: cpp
if (x) {
return 1;
} else {
return 2;
}
Possible execution order is usually represented by a *control flow graph*:
.. container:: column-right
This CFG is generated from some text using a Sphinx extension.
.. graphviz::
digraph {
graph [ dpi = 1000 ]
node [shape=polygon,sides=4,color=blue4,style="filled,rounded",fontname=consolas,fontcolor=white]
a [label=<if<BR /><FONT POINT-SIZE="10">IfStmt</FONT>>]
b [label=<x<BR /><FONT POINT-SIZE="10">VariableAccess</FONT>>]
c [label=<1<BR /><FONT POINT-SIZE="10">Literal</FONT>>]
d [label=<2<BR /><FONT POINT-SIZE="10">Literal</FONT>>]
e [label=<return<BR /><FONT POINT-SIZE="10">ReturnStmt</FONT>>]
f [label=<return<BR /><FONT POINT-SIZE="10">ReturnStmt</FONT>>]
a -> b
b -> {c, d}
c -> e
d -> f
}
Block diagram
=============
.. .. blockdiag::
..
.. blockdiag {
.. // node shapes for flowcharts
.. condition [shape = flowchart.condition];
.. database [shape = flowchart.database];
.. terminator [shape = flowchart.terminator];
.. input [shape = flowchart.input];
..
.. condition -> database -> terminator -> input;
.. }
.. blockdiag::
blockdiag {
Query, Libraries -> "QL compiler" -> "Compiled query";
Codebase -> Extractor -> "Snapshot database" -> Evaluator;
"Compiled query" -> Evaluator -> "Query results";
group {
label = "Query compilation";
shape = line;
Query; Libraries; "QL compiler"; "Compiled query";
}
group {
label = "Extraction";
shape = line;
Codebase; Extractor; "Snapshot database";
}
group {
label = "Query evaluation";
shape = "line";
Evaluator;
}
}

17
docs/language/ql-training-rst/index.rst
View File

@@ -7,9 +7,20 @@ QL training and variant analysis examples
.. toctree::
:glob:
:maxdepth: 1
:hidden:
./**/*
./*
./cpp/intro-ql-cpp
./cpp/bad-overflow-guard
./cpp/program-representation-cpp
./cpp/data-flow-cpp
./cpp/snprintf
./cpp/global-data-flow-cpp
./cpp/control-flow-cpp
.. toctree::
:glob:
:maxdepth: 1
:hidden:
For a full list of resources, visit `QL training and variant analysis examples <https://help.semmle.com/QL/ql-training/>`__.
./java/intro-ql-java

1
docs/language/ql-training-rst/java/intro-ql-java.rst
View File

@@ -1,3 +1,4 @@
=========================================
Introduction to variant analysis for Java
=========================================

4
docs/language/ql-training-rst/slide-snippets/intro-ql-general.rst
View File

@@ -15,8 +15,8 @@ Patching is still possible mid-flight, but what if there are more such issues?
The bug, which had gone undetected by traditional solutions, was likely to prevent the capsule’s parachutes from opening, resulting in the Rover crashing onto the red planet’s rocky surface.
Zoom in on the code
===================
Zoom in on the code...
======================
(For illustration only, not actually NASA code!)