Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-11-14 13:44:41 +08:00
Code Issues Projects Releases Packages Wiki Activity
Mailspring/internal_packages/phishing-detection/docs/main.html

343 lines
13 KiB
HTML
Raw Normal View History

add phishing detection example
2015-10-03 06:38:48 +08:00
<!DOCTYPE html>
<html>
<head>
<title>Phishing Detection</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">&#182;</a>
</div>
<h1 id="phishing-detection">Phishing Detection</h1>
<p>This is a simple package to notify N1 users if an email is a potential
phishing scam.</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">&#182;</a>
</div>
<p>You can access N1 dependencies by requiring ‘nylas-exports’</p>
</div>
<div class="content"><div class='highlight'><pre>{React,</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">&#182;</a>
</div>
<p>The ComponentRegistry manages all React components in N1.</p>
</div>
<div class="content"><div class='highlight'><pre> ComponentRegistry,</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">&#182;</a>
</div>
<p>A <code>Store</code> is a Flux component which contains all business logic and data
models to be consumed by React components to render markup.</p>
</div>
<div class="content"><div class='highlight'><pre> MessageStore} = <span class="hljs-built_in">require</span> <span class="hljs-string">'nylas-exports'</span></pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">&#182;</a>
</div>
<p>Notice that this file is <code>main.cjsx</code> rather than <code>main.coffee</code>. We use the
<code>.cjsx</code> filetype because we use the CJSX DSL to describe markup for React to
render. Without the CJSX, we could just name this file <code>main.coffee</code> instead.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PhishingIndicator</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span></pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">&#182;</a>
</div>
<p>Adding a @displayName to a React component helps for debugging.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-property">@displayName</span>: <span class="hljs-string">'PhishingIndicator'</span></pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">&#182;</a>
</div>
<p>@propTypes is an object which validates the datatypes of properties that
this React component can receive.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-property">@propTypes</span>:
<span class="hljs-attribute">thread</span>: React.PropTypes.object.isRequired</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">&#182;</a>
</div>
<p>A React component’s <code>render</code> method returns a virtual DOM element described
in CJSX. <code>render</code> is deterministic: with the same input, it will always
render the same output. Here, the input is provided by @isPhishingAttempt.
<code>@state</code> and <code>@props</code> are popular inputs as well.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">render</span>: <span class="hljs-function">=&gt;</span></pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-9">&#182;</a>
</div>
<p>Our inputs for the virtual DOM to render come from @isPhishingAttempt.</p>
</div>
<div class="content"><div class='highlight'><pre> [from, reply_to] = <span class="hljs-property">@isPhishingAttempt</span>()</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-10">&#182;</a>
</div>
<p>We add some more application logic to decide how to render.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> from <span class="hljs-keyword">isnt</span> <span class="hljs-literal">null</span> <span class="hljs-keyword">and</span> reply_to <span class="hljs-keyword">isnt</span> <span class="hljs-literal">null</span>
React.createElement(<span class="hljs-string">"div"</span>, {<span class="hljs-string">"className"</span>: <span class="hljs-string">"phishingIndicator"</span>},
React.createElement(<span class="hljs-string">"b"</span>, <span class="hljs-literal">null</span>, <span class="hljs-string">"This message looks suspicious!"</span>),
React.createElement(<span class="hljs-string">"p"</span>, <span class="hljs-literal">null</span>, <span class="hljs-string">"It originates from "</span>, (from), <span class="hljs-string">" but replies will go to "</span>, (reply_to), <span class="hljs-string">"."</span>)
)</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-11">&#182;</a>
</div>
<p>If you don’t want a React component to render anything at all, then your
<code>render</code> method should return <code>null</code> or <code>undefined</code>.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">else</span>
<span class="hljs-literal">null</span>
<span class="hljs-attribute">isPhishingAttempt</span>: <span class="hljs-function">=&gt;</span></pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-12">&#182;</a>
</div>
<p>In this package, the MessageStore is the source of our data which will be
the input for the <code>render</code> function. @isPhishingAttempt is performing some
domain-specific application logic to prepare the data for <code>render</code>.</p>
</div>
<div class="content"><div class='highlight'><pre> message = MessageStore.items()[<span class="hljs-number">0</span>]</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-13">&#182;</a>
</div>
<p>This package’s strategy to ascertain whether or not the email is a
phishing attempt boils down to checking the <code>replyTo</code> attributes on
<code>Message</code> models from <code>MessageStore</code>.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> message.replyTo? <span class="hljs-keyword">and</span> message.replyTo.length != <span class="hljs-number">0</span></pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-14">&#182;</a>
</div>
<p>The <code>from</code> and <code>replyTo</code> attributes on <code>Message</code> models both refer to
arrays of <code>Contact</code> models, which in turn have <code>email</code> attributes.</p>
</div>
<div class="content"><div class='highlight'><pre> from = message.from[<span class="hljs-number">0</span>].email
reply_to = message.replyTo[<span class="hljs-number">0</span>].email</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-15">&#182;</a>
</div>
<p>This is our core logic for our whole package! If the <code>from</code> and
<code>replyTo</code> emails are different, then we want to show a phishing warning.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> reply_to <span class="hljs-keyword">isnt</span> from
<span class="hljs-keyword">return</span> [from, reply_to]
<span class="hljs-keyword">return</span> [<span class="hljs-literal">null</span>, <span class="hljs-literal">null</span>];
<span class="hljs-built_in">module</span>.exports =</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-16">&#182;</a>
</div>
<p>Activate is called when the package is loaded. If your package previously
saved state using <code>serialize</code> it is provided.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">activate</span>: <span class="hljs-function"><span class="hljs-params">(<span class="hljs-property">@state</span>)</span> -&gt;</span></pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-17">&#182;</a>
</div>
<p>This is a good time to tell the <code>ComponentRegistry</code> to insert our
React component into the <code>&#39;MessageListHeaders&#39;</code> part of the application.</p>
</div>
<div class="content"><div class='highlight'><pre> ComponentRegistry.register PhishingIndicator,
<span class="hljs-attribute">role</span>: <span class="hljs-string">'MessageListHeaders'</span></pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-18">&#182;</a>
</div>
<p>Serialize is called when your package is about to be unmounted.
You can return a state object that will be passed back to your package
when it is re-activated.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">serialize</span>: <span class="hljs-function">-&gt;</span></pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-19">&#182;</a>
</div>
<p>This <strong>optional</strong> method is called when the window is shutting down,
or when your package is being updated or disabled. If your package is
watching any files, holding external resources, providing commands or
subscribing to events, release them here.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">deactivate</span>: <span class="hljs-function">-&gt;</span>
ComponentRegistry.unregister(PhishingIndicator)</pre></div></div>
</li>
</ul>
</div>
</body>
</html>
Reference in a new issue Copy permalink