chore: Add guides and comparison pages to landing site
This commit is contained in:
Dries Augustyns
@@ -0,0 +1,337 @@
|
||||
import React from 'react';
|
||||
import {GuideLayout, InfoBox} from '../../components/guides';
|
||||
import {CodeBlock} from '../../components/CodeBlock';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function WhatIsSPF() {
|
||||
return (
|
||||
<GuideLayout
|
||||
title="What is SPF? Email Sender Policy Framework Explained"
|
||||
description="Learn how SPF records work, prevent email spoofing, and improve deliverability. Complete guide with setup examples and best practices."
|
||||
lastUpdated="2025-12-20"
|
||||
readTime="7 min"
|
||||
canonical="https://www.useplunk.com/guides/what-is-spf"
|
||||
>
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<p className="text-neutral-700 leading-relaxed">
|
||||
SPF (Sender Policy Framework) is an email authentication protocol that allows domain owners to specify which
|
||||
mail servers are authorized to send emails on behalf of their domain.
|
||||
</p>
|
||||
<p className="mt-4 text-neutral-700 leading-relaxed">
|
||||
Think of SPF as a guest list for your domain—it tells receiving servers, "These are the only servers allowed
|
||||
to send email using my domain name."
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* How SPF Works */}
|
||||
<section id="how-spf-works" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How SPF Works</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
SPF works by publishing a list of authorized sending servers in your DNS records. Here's the process:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6 mb-8">
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">1. You Publish an SPF Record</h3>
|
||||
<p className="text-neutral-700">
|
||||
You add a TXT record to your domain's DNS that lists all IP addresses and services authorized to send
|
||||
email from your domain.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">2. An Email is Sent</h3>
|
||||
<p className="text-neutral-700">
|
||||
When someone sends an email claiming to be from your domain, the receiving server notes the IP address of
|
||||
the sending server.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">3. The Receiving Server Checks SPF</h3>
|
||||
<p className="text-neutral-700">
|
||||
The receiving server looks up your domain's SPF record in DNS and checks if the sending server's IP
|
||||
address is listed as authorized.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-neutral-900 pl-6">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-2">4. Pass or Fail</h3>
|
||||
<p className="text-neutral-700">
|
||||
If the IP matches, SPF passes. If not, SPF fails and the email may be flagged as spam or rejected,
|
||||
depending on your policy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="SPF Validates the Server, Not the Content">
|
||||
<p>
|
||||
Unlike DKIM which validates email content, SPF only checks if the sending server is authorized. This is why
|
||||
using both SPF and DKIM together provides stronger authentication.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* SPF Record Syntax */}
|
||||
<section id="spf-record-syntax" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">SPF Record Syntax</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
An SPF record is a TXT record with a specific format. Here's a typical example:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
language="dns"
|
||||
title="Example SPF Record"
|
||||
code={`v=spf1 include:_spf.google.com include:sendgrid.net ip4:192.0.2.1 ~all
|
||||
|
||||
# Breaking down the components:
|
||||
# v=spf1 -> SPF version (always v=spf1)
|
||||
# include:_spf.google.com -> Include Google's SPF record
|
||||
# include:sendgrid.net -> Include SendGrid's SPF record
|
||||
# ip4:192.0.2.1 -> Authorize specific IPv4 address
|
||||
# ~all -> Soft fail for all others`}
|
||||
/>
|
||||
|
||||
<div className="mt-8 space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Common SPF Mechanisms</h3>
|
||||
<div className="rounded-xl border border-neutral-200 overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-neutral-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-neutral-900">Mechanism</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-neutral-900">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-200">
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">ip4:192.0.2.1</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Authorize specific IPv4 address</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">ip6:2001:db8::1</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Authorize specific IPv6 address</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">include:domain.com</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Include another domain's SPF record</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">a</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Authorize domain's A record IP</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">mx</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Authorize domain's MX record IPs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">~all</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Soft fail (treat others as suspicious)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 font-mono text-sm text-neutral-900">-all</td>
|
||||
<td className="px-6 py-4 text-sm text-neutral-700">Hard fail (reject all others)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="warning" title="10 DNS Lookup Limit">
|
||||
<p>
|
||||
SPF has a hard limit of 10 DNS lookups. Each <code>include:</code> mechanism counts as one lookup. Exceeding
|
||||
this limit causes SPF validation to fail. Keep your SPF record concise and avoid excessive includes.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Why SPF Matters */}
|
||||
<section id="why-spf-matters" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Why SPF Matters</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 mb-8">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Prevents Email Spoofing</h3>
|
||||
<p className="text-neutral-700">
|
||||
SPF makes it much harder for spammers to send emails that appear to come from your domain. Only authorized
|
||||
servers can send on your behalf.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Improves Deliverability</h3>
|
||||
<p className="text-neutral-700">
|
||||
Emails from domains with proper SPF records are more trusted by receiving servers, leading to better inbox
|
||||
placement rates.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Protects Your Domain</h3>
|
||||
<p className="text-neutral-700">
|
||||
By specifying authorized senders, you protect your domain from being used in phishing and spam campaigns.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Required for DMARC</h3>
|
||||
<p className="text-neutral-700">
|
||||
SPF (along with DKIM) is necessary for implementing DMARC, which provides comprehensive email
|
||||
authentication and reporting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Setting Up SPF */}
|
||||
<section id="setting-up-spf" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">How to Set Up SPF</h2>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Identify All Email Senders</h3>
|
||||
<p className="text-neutral-700">
|
||||
List all services and servers that send email from your domain: your email service provider, marketing
|
||||
tools, support systems, etc.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Gather SPF Include Values</h3>
|
||||
<p className="text-neutral-700 mb-3">Each email service provides SPF values to include. For example:</p>
|
||||
<CodeBlock
|
||||
language="text"
|
||||
code={`Google Workspace: include:_spf.google.com
|
||||
Microsoft 365: include:spf.protection.outlook.com
|
||||
Plunk: include:spf.useplunk.com
|
||||
SendGrid: include:sendgrid.net`}
|
||||
showCopy={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Create Your SPF Record</h3>
|
||||
<p className="text-neutral-700 mb-3">Combine all authorized senders into one SPF record:</p>
|
||||
<CodeBlock language="dns" code={`v=spf1 include:_spf.google.com include:spf.useplunk.com ~all`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Add to DNS</h3>
|
||||
<p className="text-neutral-700">
|
||||
Add the SPF record as a TXT record in your DNS settings. The record name should be your root domain
|
||||
(e.g., "@" or "yourdomain.com").
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl bg-neutral-50 border border-neutral-200">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Verify SPF</h3>
|
||||
<p className="text-neutral-700">
|
||||
Use SPF validation tools to confirm your record is correct and doesn't exceed the 10 DNS lookup limit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="success" title="Plunk Handles This Automatically">
|
||||
<p>
|
||||
When you set up a domain in Plunk, we provide the exact SPF record you need. Just copy and paste it into
|
||||
your DNS, and we'll verify it's working correctly.
|
||||
</p>
|
||||
</InfoBox>
|
||||
</section>
|
||||
|
||||
{/* Common SPF Mistakes */}
|
||||
<section id="common-mistakes" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Common SPF Mistakes to Avoid</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Multiple SPF Records</h3>
|
||||
<p className="text-neutral-700">
|
||||
Never create multiple SPF TXT records. You can only have ONE SPF record per domain. Combine all authorized
|
||||
senders into a single record.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Exceeding 10 DNS Lookups</h3>
|
||||
<p className="text-neutral-700">
|
||||
Each <code>include:</code> mechanism counts toward the 10 lookup limit. Too many includes will cause SPF
|
||||
to fail. Consolidate where possible.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Forgetting to Update SPF</h3>
|
||||
<p className="text-neutral-700">
|
||||
When you add new email services, remember to update your SPF record. Outdated SPF records cause legitimate
|
||||
emails to fail authentication.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-red-500 pl-6 py-2">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">✗ Using +all</h3>
|
||||
<p className="text-neutral-700">
|
||||
Never use <code>+all</code> (pass all). This completely defeats the purpose of SPF by allowing anyone to
|
||||
send from your domain. Always use <code>~all</code> or <code>-all</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Guides */}
|
||||
<section id="related-guides" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Related Email Authentication Guides</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Link
|
||||
href="/guides/what-is-dkim"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">What is DKIM?</h3>
|
||||
<p className="text-sm text-neutral-600">Learn how DKIM complements SPF for email authentication.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/what-is-dmarc"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">What is DMARC?</h3>
|
||||
<p className="text-sm text-neutral-600">Implement DMARC using SPF and DKIM together.</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability Guide</h3>
|
||||
<p className="text-sm text-neutral-600">Complete guide to improving email deliverability.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</GuideLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user