mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +08:00
408 lines
13 KiB
HTML
408 lines
13 KiB
HTML
<!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">¶</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">¶</a>
|
||
</div>
|
||
<p>You can access N1 dependencies by requiring ‘mailspring-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">¶</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">¶</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">'mailspring-exports'</span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-5">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-5">¶</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">¶</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">¶</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>: PropTypes.object.isRequired</pre>
|
||
</div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-8">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-8">¶</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">=></span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-9">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-9">¶</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">¶</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">¶</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">=></span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-12">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-12">¶</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">¶</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">¶</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">¶</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">¶</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> -></span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-17">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-17">¶</a>
|
||
</div>
|
||
<p>This is a good time to tell the <code>ComponentRegistry</code> to insert our React component into the <code>'MessageListHeaders'</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">¶</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">-></span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-19">
|
||
<div class="annotation">
|
||
|
||
<div class="pilwrap ">
|
||
<a class="pilcrow" href="#section-19">¶</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">-></span>
|
||
ComponentRegistry.unregister(PhishingIndicator)</pre>
|
||
</div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |