Embed a drop (closes #280) 8ac2aa4ca6d1

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>{{ title }} · {{ owner }}'s drop</title>

<link rel="stylesheet" href="/static/style.css?v={{ assets }}">

</head>

<body class="drop-embedded">

<header class="embed-head"><a href="{{ url }}" target="_blank" rel="noopener"><strong>{{ title }}</strong></a> <span class="small mute">a drop by {{ owner }} on <a href="{{ site_url }}" target="_blank" rel="noopener">{{ site }}</a></span></header>

{% for f in files %}

<section class="filebox drop-filebox">

  <header><strong>{{ f.path }}</strong> <span class="small mute">{{ f.size|bytes }}{% if let Some(l) = f.language %} · {{ l }}{% endif %}</span></header>

  {% if let Some(html) = f.markdown %}

  <article class="doc">{{ html|safe }}</article>

  {% else if let Some(note) = f.note %}

  <p class="empty">{{ note }} <a href="{{ url }}" target="_blank" rel="noopener">Open the drop</a>.</p>

  {% else %}

  <table class="code">

  {% for line in f.lines %}

    <tr><td class="n">{{ loop.index }}</td><td class="t"><pre>{{ line|safe }}</pre></td></tr>

  {% endfor %}

  </table>

  {% endif %}

</section>

{% endfor %}

</body>

</html>

- **Embed a drop (#280):** a drop's page offers an `<iframe>` snippet; `/{owner}/drops/{id}/embed` shows its files with a link back, framed by any site, with no scripts and no forms.

    /// The iframe that puts it on another site (#280).

    embed: String,

/// A drop as another site frames it (#280): its files, a link back, no

/// chrome, no scripts.

#[derive(Template)]

#[template(path = "drop_embed.html")]

pub struct EmbedPage {

    title: String,

    owner: String,

    /// The drop's address, whole, to open it on the hub.

    url: String,

    site: String,

    site_url: String,

    assets: &'static str,

    files: Vec<ShownFile>,

}

/// What an embedded drop may do: be framed anywhere, show its styles and

/// images, and nothing else (no scripts, no forms).

const EMBED_POLICY: &str =

    "default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; frame-ancestors *; base-uri 'none'; form-action 'none'";

/// `GET /{owner}/drops/{id}/embed` (#280): the drop to put in an iframe on

/// another site; readable by whoever may read the drop.

pub async fn embed(State(app): State<Shared>, viewer: Viewer, Path((owner, id)): Path<(String, String)>) -> Result<Response, Error> {

    let shell = Shell::new(&app, &format!("/{owner}/drops/{id}/embed"), &viewer);

    let row = lookup(&app, &shell, &viewer, &owner, &id).await?;

    let (target, files) = drops::files(&app, &row, "").await.map_err(|e| Error::from_repo(shell.clone(), e))?;

    let url = drops::url_of(&row);

    let title = drops::shown_title(&row, &files);

    let label = target.label.clone();

    let files = shown(files, &format!("{url}/file/{label}/"), &format!("{url}/raw/{label}/"));

    let base = app.config.base_url().trim_end_matches('/').to_string();

    let page = EmbedPage {

        title,

        owner: row.owner.clone(),

        url: format!("{base}{url}"),

        site: shell.site.clone(),

        site_url: base,

        assets: shell.assets(),

        files,

    };

    let html = page.render().map_err(|e| Error::bad(shell.clone(), e.to_string()))?;

    Ok((

        [(axum::http::header::CONTENT_TYPE, "text/html; charset=utf-8"), (axum::http::header::CONTENT_SECURITY_POLICY, EMBED_POLICY)],

        html,

    )

        .into_response())

}

    let embed = format!(

        "<iframe src=\"{}{}/embed\" width=\"100%\" height=\"400\" style=\"border:0\" title=\"{}\"></iframe>",

        app.config.base_url().trim_end_matches('/'),

        drops::url_of(&row),

        title.replace('"', """)

    );

        embed,

        .route("/{owner}/drops/{id}/embed", get(drops::embed))

    // Embedding: the snippet on its page; the embed page frames anywhere,

    // runs no script and links back.

    let page = get(app, &source, None).await.body;

    let at = page.find("id=\"embed\"").expect("the embed field");

    assert!(page[at..].contains("iframe src=") && page[at..at + 400].contains(&format!("{source}/embed")), "{}", &page[at..at + 400]);

    let res = oxygenhub::router(app.clone()).oneshot(Request::get(format!("{source}/embed")).body(Body::empty()).unwrap()).await.unwrap();

    assert_eq!(res.status(), StatusCode::OK);

    let csp = res.headers()[header::CONTENT_SECURITY_POLICY].to_str().unwrap().to_string();

    assert!(csp.contains("frame-ancestors *") && csp.contains("default-src 'none'") && !csp.contains("script-src"), "{csp}");

    assert!(res.headers().get(header::X_FRAME_OPTIONS).is_none(), "framed by other sites");

    let body = String::from_utf8_lossy(&res.into_body().collect().await.unwrap().to_bytes()).into_owned();

    assert!(body.contains("a.txt") && body.contains(&format!("{}{source}", h.base)) && !body.contains("<script"), "{body}");

- **Embedding** (#280): `GET /{owner}/drops/{id}/embed` (whoever may read the drop) is the drop's files and a link back, without the site's chrome, sent with its own policy (`default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; frame-ancestors *; …`, so no `X-Frame-Options`): any site may frame it, and it runs no script and posts no form. The drop's page offers the `<iframe>` to copy.

<div class="drop-clone"><label for="embed">Embed</label><input type="text" id="embed" class="code" readonly value="{{ embed }}" data-select><button type="button" class="small" data-copy="{{ embed }}">copy</button></div>

/* A drop framed on another site (#280): its files and a link back. */

body.drop-embedded { margin: 0; padding: 8px; }

.embed-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0 0 8px; }