PyScript – 在浏览器中运行Python及其应用

几天前，Anaconda项目宣布了PyScript框架，该框架允许直接在浏览器中执行Python代码。此外，它还涵盖了与HTML和JS代码的集成。

在浏览器中执行Python代码并不是什么新鲜事；pyodide项目长期以来一直允许这样做（通过将Python编译为WebAssembly），但这里的新颖之处在于与浏览器生态系统的其余部分的集成。得益于PyScript，我们可以轻松地从pip仓库直接包含许多模块：所有用“纯”Python编写的模块都应该可以工作，并且一些需要本地代码的模块也已重新编译为WebAssembly。

Python拥有非常庞大的标准库以及许多优秀的外部库，因此这个项目为快速构建简单工具（如安全测试）或展示一些培训概念开辟了许多有趣的机会。

PyScript基础

让我们看一个用PyScript编写的非常简单的代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<!doctype html>
<html>
  <head>
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <py-script>
from js import alert
alert("Securitum says hi!")
    </py-script>
  </body>
</html>

如您所见，我们只需要加载脚本，然后就可以在特殊的<py-script>标签中编写Python代码。在上面的示例中，我使用了PyScript内置的js模块，它允许我们直接引用JavaScript函数。因此，正如您所猜测的，加载上述页面后，您将看到一个带有文本“Securitum says hi!”的警报。

与JS的更多交互

让我们尝试与JS进行更多交互。我将编写一个简单的脚本，使用Python的secrets模块生成随机令牌。这些令牌将在按下按钮时生成并显示在另一个HTML元素中。以下是一个示例实现：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<!doctype html>
<html>
  <head>
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <button>Click me</button>
    <div>The random token is: <b id=token></b></div>
    <py-script>
from js import document,alert
from pyodide import create_proxy
import secrets

def onclick(ev):
  pyscript.write("token", secrets.token_hex(16))
  
button = document.querySelector("button")
button.addEventListener("click", create_proxy(onclick))
    </py-script>
  </body>
</html>

如果我们希望JS代码能够执行在PyScript中定义的函数，我们需要通过调用create_proxy来包装它。PyScript提供了pyscript.write方法，允许您直接将HTML分配给具有给定ID的元素。因此，不需要引用document.getElementById（尽管这是可能的）。

从pip导入模块

虽然使用标准库中的模块只需使用正常的import语句，但如果我们想从pip仓库加载模块，则需要采取一些额外的步骤。

具体来说：必须在HTML中添加一个特殊的标签<py-env>。在该标签中，我们定义外部模块的列表。例如，如果我们想导入primefac，我们必须事先使用该标签：

1
2
3


<py-env>
 - primefac
</py-env>

在接下来的代码中，基本的import primefac将起作用。

primefac是一个用于分解数字的库。因此，让我们编写一个非常简单的脚本，使用它来分解用户提供的数字。代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<!doctype html>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
  - primefac
</py-env>
<p><label>Enter an integer in the range from 1 to 10000: <input id=n></label></p>
<p>The prime factors are:: <span id=factors></span></p>
<py-script>
import primefac
from pyodide import create_proxy

input = document.querySelector("#n")
def oninput(ev):
  num = int(ev.target.value)
  num = min(num, 10000)
  num = max(num, 1)
  factors = list(primefac.primefac(num))
  pyscript.write("factors", factors)

input.addEventListener("input", create_proxy(oninput))
</py-script>

在学习了上面的基础知识后，我们可以尝试以更实际的方式使用PyScript。

示例#1：测试bleach清理器

Bleach是Mozilla开发的一个Python库，用于从恶意元素或允许利用XSS漏洞的属性中清理（净化）HTML代码。就个人而言，我非常喜欢测试清理器，其中最方便的方法之一是编写一个代码，在按下后续键后立即执行清理。

使用PyScript，编写这样的环境非常简单。

示例#2：密码学（+生成QR码）

在Python中，有一个非常有用的库叫做cryptography，它允许您执行基本上任何密码学操作（加密、签名、生成一次性代码、哈希等）。它不是用“纯”Python编写的，而是那些专门为pyodide（以及PyScript）编译的库之一。

作为培训的一部分，我决定尝试使用这个库并编写一个Google Authenticator模拟器。我可以轻松地做到这一点，因为cryptography有一个现成的模块，可以使用TOTP算法生成一次性代码。

示例#3：sqlite

我想在本文中展示的最后一个示例将使用sqlite。sqlite处理程序包含在Python标准库中，并且可以从PyScript级别使用，因此我认为它可以用作培训中SQL注入的演示。

总结

PyScript是一个有趣的新项目，允许您在浏览器中直接执行自己的Python代码。目前，它仍处于早期阶段，不难找到无法工作的组件，但它有很大的潜力。从我的角度来看——在培训方面以及利用广泛的Python标准库准备简单工具以方便日常活动方面，它看起来特别有趣。

— Michał Bentkowski