maekawatoshiki/seccmp2018.html Secret

## seccmp2018.html
  <html>
  <style>
.title-front {
  color: white;
  background: #37474f;
  height: 900px;
  text-align: center;
  border-bottom-width: 1px;
  border-color: white;
}
.title {
  color: white;
  font-size: 43px;
  text-align: left;
}
.slide {
  background: #37474f;
  height: 900px;
  text-align: center;
  border-bottom-width: 1px;
  border-color: white;
}
.content {
  padding: 40px;
  font-size: 35px;
  line-height: 1.7;
  color: #ececec;
  text-align: left;
}
  </style>
  <body>
    <div class='title-front'>
      <a href='#0' style="display:block;height:400px;"></a>
      <span style="font-size: 60;">JavaScriptエンジンを作った話</span><br>
      <span style="font-size: 24;color:#ececec">セキュリティ・キャンプ 2018 標準ゼミトラックX 言語自作ゼミ</span><br>
      <span style="font-size: 24;color:#ececec">前川 隼輝 (@uint256_t)</span><br>
    </div>
    <a href='#1' style="display:block;">
      <div id='0' class='slide'>
        <div style="padding:40px" ><span class='title'>Table of Contents</span></a>
        <div class='content'>
          1. なぜJSエンジンを作ろうと思ったのか<br>
          2. できること<br>
          3. セキュリティの話<br>
          4. デモンストレーション<br>
          5. まとめ<br>
        </div>
      </div>
    </a>
    <a href='#2' style="display:block;">
      <div id='1' class='slide'>
        <div style="padding:40px"><span class='title'>なぜJSエンジンを作ろうと思ったのか</span></a>
        <div class='content'>
          1. JavaScriptのことを理解したい<br>
          2. でもJavaScriptをただ勉強するだけでは面白くない<br style="height:80px">
        </div>
      </div>
    </a>
    <a href='#3' style="display:block;">
      <div id='2' class='slide'>
        <div style="padding:40px"><span class='title'>なぜJSエンジンを作ろうと思ったのか</span></a>
        <div class='content'>
          1. JavaScriptのことを理解したい<br>
          2. でもJavaScriptをただ勉強するだけでは面白くない<br style="height:80px">
          <span style="text-align:center;font-style:italic;font-size:50px;color:white">そうだ、JavaScriptエンジンを作ろう!</span>
          <br style="height:100px">
          (3. ブラウザを作っているのでJavaScriptエンジンを載せたい)
        </div>
      </div>
    </a>
    <a href='#4' style="display:block;">
      <div id='3' class='slide'>
        <div style="padding:40px"><span class='title'>できること</span></div>
        <div class='content'>
          ・最低限、JavaScriptと主張できる程度の機能は使える<br>
          <div style="padding-left:40px">- 変数定義、代入、数値や文字列の使用・演算</div>
          <div style="padding-left:40px">- 関数定義、その関数のnew、オブジェクトリテラル、配列...etc</div>
          <br style='height:50px'>
          ・JIT(実行時にネイティブバイナリにコンパイルして高速化)も<b>部分的に</b>使えます<br>
          <div style="padding-left:40px">- 数値や真偽値のみを使用している関数が対象になる</div>
        </div>
      </div>
    </a>
    <a href='#5' style="display:block;">
      <div id='4' class='slide'>
        <div style="display:block;padding:40px"><span class='title'>セキュリティの話</span></div>
        <div class='content'>
          ・本体とVMはプロセスが分かれている<br>
          <div style="padding-left:40px">- VMがsegmentation faultで落ちてもデストラクタなどを動かせるかも</div>
          <div style="padding-left:40px">↑　今はまだできません...</div>
          ・そこそこ見やすい文法エラー表示
        </div>
      </div>
    </a>
    <a href='#6' style='display:block'>
      <div id='5' class='slide'>
        <div style="padding:40px; float:left;width:20%;height:900px;">
          <span class='title'>Demo</span><br style='height:50px'>
          <div style='height:900px; color:white;text-align:left;font-size:20px'>話だけ聞いていても面白くないので、ここで実際に動作を見てみます</div>
        </div>
        <div style='float:right;width:73%;padding-top:-20;height:900px;background:white'><div style='height:900px;background:white'></div></div>
        <div style='clear:both'></div>
      </div>
    </a>
    <a href='#7' style='display:block'>
      <div id='6' class='slide'>
        <div style="display:block;padding:40px"><span class='title'>まとめ</span></div>
        <div class='content'>
          ・ある程度動作するJavaScriptエンジンが出来上がった<br>
          ・JavaScriptはブラウザに組み込まれる
          <div style="padding-left:40px">- 攻撃の的になる. セキュリティ対策は大切<br>
          ↑ 正直、このキャンプ中にはこれといったセキュリティ対策を講じることはできなかった(課題)
        </div>
      </div>
    </a>
    <a href='#0' style="display:block;">
      <div id='7' class='title-front'>
        <div style='height:400px;'></div>
        <span style="font-size: 48;">ご清聴 ありがとうございました</span><br style='height:40px'>
        <div style='width:500px;margin:auto'>
          <span style="font-size: 26;color:#ececec">GitHub<img src='github.png' width='25px'> maekawatoshiki/naglfar</span><br>
        </div>
      </div>
    </a>
  </body>
</html>
	<html>
	<style>
	.title-front {
	color: white;
	background: #37474f;
	height: 900px;
	text-align: center;
	border-bottom-width: 1px;
	border-color: white;
	}
	.title {
	color: white;
	font-size: 43px;
	text-align: left;
	}
	.slide {
	background: #37474f;
	height: 900px;
	text-align: center;
	border-bottom-width: 1px;
	border-color: white;
	}
	.content {
	padding: 40px;
	font-size: 35px;
	line-height: 1.7;
	color: #ececec;
	text-align: left;
	}
	</style>
	<body>
	<div class='title-front'>
	<a href='#0' style="display:block;height:400px;"></a>
	<span style="font-size: 60;">JavaScriptエンジンを作った話</span><br>
	<span style="font-size: 24;color:#ececec">セキュリティ・キャンプ 2018 標準ゼミトラックX 言語自作ゼミ</span><br>
	<span style="font-size: 24;color:#ececec">前川隼輝 (@uint256_t)</span><br>
	</div>
	<a href='#1' style="display:block;">
	<div id='0' class='slide'>
	<div style="padding:40px" ><span class='title'>Table of Contents</span></a>
	<div class='content'>
	1. なぜJSエンジンを作ろうと思ったのか<br>
	2. できること<br>
	3. セキュリティの話<br>
	4. デモンストレーション<br>
	5. まとめ<br>
	</div>
	</div>
	</a>
	<a href='#2' style="display:block;">
	<div id='1' class='slide'>
	<div style="padding:40px"><span class='title'>なぜJSエンジンを作ろうと思ったのか</span></a>
	<div class='content'>
	1. JavaScriptのことを理解したい<br>
	2. でもJavaScriptをただ勉強するだけでは面白くない<br style="height:80px">
	</div>
	</div>
	</a>
	<a href='#3' style="display:block;">
	<div id='2' class='slide'>
	<div style="padding:40px"><span class='title'>なぜJSエンジンを作ろうと思ったのか</span></a>
	<div class='content'>
	1. JavaScriptのことを理解したい<br>
	2. でもJavaScriptをただ勉強するだけでは面白くない<br style="height:80px">
	<span style="text-align:center;font-style:italic;font-size:50px;color:white">そうだ、JavaScriptエンジンを作ろう!</span>
	<br style="height:100px">
	(3. ブラウザを作っているのでJavaScriptエンジンを載せたい)
	</div>
	</div>
	</a>
	<a href='#4' style="display:block;">
	<div id='3' class='slide'>
	<div style="padding:40px"><span class='title'>できること</span></div>
	<div class='content'>
	・最低限、JavaScriptと主張できる程度の機能は使える<br>
	<div style="padding-left:40px">- 変数定義、代入、数値や文字列の使用・演算</div>
	<div style="padding-left:40px">- 関数定義、その関数のnew、オブジェクトリテラル、配列...etc</div>
	<br style='height:50px'>
	・JIT(実行時にネイティブバイナリにコンパイルして高速化)も<b>部分的に</b>使えます<br>
	<div style="padding-left:40px">- 数値や真偽値のみを使用している関数が対象になる</div>
	</div>
	</div>
	</a>
	<a href='#5' style="display:block;">
	<div id='4' class='slide'>
	<div style="display:block;padding:40px"><span class='title'>セキュリティの話</span></div>
	<div class='content'>
	・本体とVMはプロセスが分かれている<br>
	<div style="padding-left:40px">- VMがsegmentation faultで落ちてもデストラクタなどを動かせるかも</div>
	<div style="padding-left:40px">↑　今はまだできません...</div>
	・そこそこ見やすい文法エラー表示
	</div>
	</div>
	</a>
	<a href='#6' style='display:block'>
	<div id='5' class='slide'>
	<div style="padding:40px; float:left;width:20%;height:900px;">
	<span class='title'>Demo</span><br style='height:50px'>
	<div style='height:900px; color:white;text-align:left;font-size:20px'>話だけ聞いていても面白くないので、ここで実際に動作を見てみます</div>
	</div>
	<div style='float:right;width:73%;padding-top:-20;height:900px;background:white'><div style='height:900px;background:white'></div></div>
	<div style='clear:both'></div>
	</div>
	</a>
	<a href='#7' style='display:block'>
	<div id='6' class='slide'>
	<div style="display:block;padding:40px"><span class='title'>まとめ</span></div>
	<div class='content'>
	・ある程度動作するJavaScriptエンジンが出来上がった<br>
	・JavaScriptはブラウザに組み込まれる
	<div style="padding-left:40px">- 攻撃の的になる. セキュリティ対策は大切<br>
	↑ 正直、このキャンプ中にはこれといったセキュリティ対策を講じることはできなかった(課題)
	</div>
	</div>
	</a>
	<a href='#0' style="display:block;">
	<div id='7' class='title-front'>
	<div style='height:400px;'></div>
	<span style="font-size: 48;">ご清聴ありがとうございました</span><br style='height:40px'>
	<div style='width:500px;margin:auto'>
	<span style="font-size: 26;color:#ececec">GitHub<img src='github.png' width='25px'> maekawatoshiki/naglfar</span><br>
	</div>
	</div>
	</a>
	</body>
	</html>